AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast 自定义 Dialog
// AlertDialog 、SimpleDialog、showModalBottomSheet、showToast
// 使用showToast安装插件 https://pub.dev/packages/fluttertoast
Fluttertoast.showToast( msg: "This is Short Toast", toastLength: Toast.LENGTH_SHORT, timeInSecForIos: 1); // 改变弹窗内的值
StatefulBuilder(
builder: (context, changeState) {
return '内容'
},
)
// 点击背景消失
showDialog(
context: context,
builder: (context) {
return CupertinoDialog (
child: Text('zxcvbnm123456', style: TextStyle(fontSize: Screen.width(30), decoration: TextDecoration.none, color: Colors.black, fontWeight: FontWeight.normal)));
}
);
// 点击背景不消失
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoDialog (
child: Text('zxcvbnm123456', style: TextStyle(fontSize: Screen.width(30), decoration: TextDecoration.none, color: Colors.black, fontWeight: FontWeight.normal)));
}
);
import 'package:flutter/material.dart';
import 'myDialog.dart'; class DialogPage extends StatefulWidget{
DialogPage({Key key});
_Dialog createState() => _Dialog();
} class _Dialog extends State {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Dialog')
),
body: ListView(
children: <Widget>[
RaisedButton(
child: Text('AlertDialog'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('确定要取消吗'),
actions: <Widget>[
FlatButton(child: Text('取消'), onPressed: () {Navigator.pop(context, '222');},),
FlatButton(child: Text('确定'), onPressed: () {Navigator.pop(context, '222');},),
],
);
}
);
},
),
RaisedButton(
child: Text('弹出选择卡'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text('选择卡'),
children: <Widget>[
SimpleDialogOption(child: Text('A'), onPressed: () { Navigator.pop(context);},),
SimpleDialogOption(child: Text('B'), onPressed: () { Navigator.pop(context);},),
SimpleDialogOption(child: Text('C'), onPressed: () { Navigator.pop(context);},),
],
);
}
);
},
),
RaisedButton(
child: Text('弹出自定义'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return MyDialog(title:"关于我们", content:"关于我们");
}
);
},
)
],
)
);
}
}
// 自定义dialog
import 'dart:async'; import 'package:flutter/material.dart';
//MyDialog(title:"关于我们", content:"关于我们"); 引入文件 然后调用方法 class MyDialog extends Dialog {
String title;
String content; MyDialog({this.title="",this.content=""}); _showTimer(context){
var timer;
timer = Timer.periodic(
Duration(milliseconds: 3000), (t) { print('关闭');
Navigator.pop(context);
t.cancel(); //取消定时器 timer.cancel();
});
} @override
Widget build(BuildContext context) { _showTimer(context); // TODO: implement build
return Material(
type: MaterialType.transparency,
child: Center(
child: Container(
height: 300,
width: 300,
color: Colors.white,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text("${this.title}"),
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
child: Icon(Icons.close),
onTap: (){
Navigator.pop(context);
},
),
)
],
),
),
Divider(),
Container(
padding: EdgeInsets.all(10),
width: double.infinity,
child: Text("${this.content}",textAlign: TextAlign.left),
)
],
), )),
);
}
}
AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast 自定义 Dialog的更多相关文章
- 30 Flutter自定义Dialog
MyDialog.dart import 'dart:async'; import 'package:flutter/material.dart'; class MyDialog extends Di ...
- android 自定义Dialog背景透明及显示位置设置
先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog ...
- Android 开发之自定义Dialog及UI的实现
我们在开发中,经常会自定义Dialog,因为原生的AlertDialog无法满足我们的需求,这个时候就需要自定义Dialog,那么如何自定义呢,其实不难,就是有点繁琐而已.也就是自定义一个UI的xml ...
- 非自定义和自定义Dialog的介绍!!!
一.非自定义Dialog的几种形式介绍 转自:http://www.kwstu.com/ArticleView/kwstu_20139682354515 前言 对话框对于应用也是必不可少的一个组件,在 ...
- 自定义dialog自动弹出软键盘
1.解决无法弹出输入法: 在show()方法调用之前,用dialog.setView(new EditText(context))添加一个空的EditText,由于是自定义的AlertDialog,有 ...
- Android自定义 Dialog 对话框
Android自定义Dialoghttp://www.cnblogs.com/and_he/archive/2011/09/16/2178716.html Android使用自定义AlertDialo ...
- 自定义Dialog布局的弹窗功能的简单实现
package com.loaderman.dialogdemo; import android.os.Bundle; import android.support.v7.app.AlertDialo ...
- android 自定义Dialog去除黑色边框
在自定义Dialog时显示的界面中老是有黑色的边框,下面就介绍使用style去除黑色边框方法. 首先在values/styles定义自定义样式: <style name="MyDial ...
- Android—自定义Dialog
在 Android 日常的开发中,Dialog 使用是比较广泛的.无论是提示一个提示语,还是确认信息,还是有一定交互的(弹出验证码,输入账号密码登录等等)对话框. 而我们去看一下原生的对话框,虽然随着 ...
随机推荐
- Xamarin.Android 开发,生成时提示“Resource.Drawable”未包含“BG”的定义
Xamarin Android提示Resource.Drawable”未包含“BG”的定义错误信息:error CS0117: '“Resource.Drawable”未包含“BG”的定义Xamari ...
- LED Keychain: Timeless Business Gift
Every business owner understands the importance of reducing marketing budgets and investing in sales ...
- POI题解整合
我也不知道为啥我就想把POI的题全都放到一篇blog里写完. POI 2005 SAM-Toy Cars 贪心,每次选下次出现最晚的. POI 2006 KRA-The Disks 箱子位置单调,所以 ...
- 【数据结构】【C++】堆栈的实现与应用
堆栈(Stack) 参考浙大版<数据结构(第2版)> 堆栈可以认为是具有一定约束的线性表,插入和删除的操作都在栈顶的位置,先进入的元素将在后进入的元素之后取出,与生活中的桶类似,故又称为后 ...
- 前端框架-Vue 入门
一.介绍 1.Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. ...
- this 的值到底是什么?一次说清楚
this 的值到底是什么?一次说清楚 方应杭 杭州饥人谷教育科技有限公司 CTO 1,071 人赞同了该文章 你可能遇到过这样的 JS 面试题: var obj = { foo: function ...
- 什么是kafka,怎么使用? (2) - 内含zookeeper等
zookeeper依赖于java https://baike.baidu.com/item/yum/2835771?fr=aladdin http://yum.baseurl.org/ 去yum官网下 ...
- ansible笔记(13):变量(二)
1.谈一谈[Gathering Facts]:使用setup模块查看 当我们运行一个playbook时,默认都会运行一个名为“[Gathering Facts]”的任务,前文中已经大致的介绍过这个默认 ...
- [TJOI2017] DNA - 后缀数组,稀疏表
[TJOI2017] DNA Description 求模式串与主串的匹配次数,容错不超过三个字符. Solution 枚举每个开始位置,进行暴力匹配,直到失配次数用光或者匹配成功.考虑到容错量很小, ...
- Leetcode 面试题 01.01. 判定字符是否唯一
实现一个算法,确定一个字符串 s 的所有字符是否全都不同. 示例 1: 输入: s = "leetcode"输出: false 示例 2: 输入: s = "abc&qu ...