Flutter对话框
AlertDialog(确认对话框)
在actions中定义了两个按钮，分别为确定和取消， Navigator.pop(context, ‘Cancle’);是点击按钮后对话框退出，后面的参数为我们需要返回的值，用到了异步来获取返回的值
_alertDialog() async {
var result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示信息"),
content: Text("确定删除吗？"),
actions: [
TextButton(
child: Text("取消"),
onPressed: () {
print("取消");
Navigator.pop(context, 'Cancle');
},
),
TextButton(
child: Text("确定"),
onPressed: () {
print("确定");
Navigator.pop(context, "Ok");
})
],
);
});
print(result);
}
SimpleDialog(选择对话框)
_simpleDialog() async {
var redult = await showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text("选择内容"),
children: [
SimpleDialogOption(
child: Text("Option A"),
onPressed: () {
print("Option A");
Navigator.pop(context, "A");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option B"),
onPressed: () {
print("Option B");
Navigator.pop(context, "B");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option C"),
onPressed: () {
print("Option C");
Navigator.pop(context, "C");
},
)
],
);
});
print(redult);
}
showModalBottomSheet(底部弹出的对话框)
_modelBottomSheet() async {
var result = await showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 200,
child: Column(
children: [
ListTile(
title: Text("分享A"),
onTap: () {
Navigator.pop(context, "A");
},
),
Divider(),
ListTile(
title: Text("分享B"),
onTap: () {
Navigator.pop(context, "B");
},
),
Divider(),
ListTile(
title: Text("分享C"),
onTap: () {
Navigator.pop(context, "C");
},
),
],
),
);
},
);
print(result);
}
showToast(提示信息框)
showToast我们选择的是第三方库进行实现
-
首先在https://pub.dev/中搜索toast，我们选择的是fluttertoast（比较新）
-
然后还是pubspec.yaml 中添加依赖
dependencies:
fluttertoast: ^8.0.8
使用时在对应文件导包
import 'package:fluttertoast/fluttertoast.dart';
- 使用，可以将官方示例拿过来进行修改
_toast(){
Fluttertoast.showToast(
msg: "提示信息",
toastLength: Toast.LENGTH_SHORT,
//提示信息的方位
gravity: ToastGravity.BOTTOM,
//这个属性只有在iOS上才有用
timeInSecForIosWeb: 1,
//背景颜色
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0
);
}
上面几种对话框的完整代码
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class DialogPage extends StatefulWidget {
DialogPage({
Key? key}) : super(key: key);
@override
_DialogPageState createState() => _DialogPageState();
}
class _DialogPageState extends State<DialogPage> {
_alertDialog() async {
var result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示信息"),
content: Text("确定删除吗？"),
actions: [
TextButton(
child: Text("取消"),
onPressed: () {
print("取消");
Navigator.pop(context, 'Cancle');
},
),
TextButton(
child: Text("确定"),
onPressed: () {
print("确定");
Navigator.pop(context, "Ok");
})
],
);
});
print(result);
}
_simpleDialog() async {
var redult = await showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text("选择内容"),
children: [
SimpleDialogOption(
child: Text("Option A"),
onPressed: () {
print("Option A");
Navigator.pop(context, "A");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option B"),
onPressed: () {
print("Option B");
Navigator.pop(context, "B");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option C"),
onPressed: () {
print("Option C");
Navigator.pop(context, "C");
},
)
],
);
});
print(redult);
}
_modelBottomSheet() async {
var result = await showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 200,
child: Column(
children: [
ListTile(
title: Text("分享A"),
onTap: () {
Navigator.pop(context, "A");
},
),
Divider(),
ListTile(
title: Text("分享B"),
onTap: () {
Navigator.pop(context, "B");
},
),
Divider(),
ListTile(
title: Text("分享C"),
onTap: () {
Navigator.pop(context, "C");
},
),
],
),
);
},
);
print(result);
}
_toast(){
Fluttertoast.showToast(
msg: "提示信息",
toastLength: Toast.LENGTH_SHORT,
//提示信息的方位
gravity: ToastGravity.BOTTOM,
//这个属性只有在iOS上才有用
timeInSecForIosWeb: 1,
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dialog"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _alertDialog,
child: Text("alert弹出框-AlertDialog"),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _simpleDialog,
child: Text("select弹出框-SimpleDialog"),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _modelBottomSheet,
child: Text("ActionSheet底部弹出框-showModalBottomSheet"),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toast,
child: Text("toast-fluttertoast第三方库"),
),
SizedBox(height: 20),
],
)),
);
}
}
自定义对话框
新建一个类继承 Dialog
// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:flutter/material.dart';
class MyDialog extends Dialog {
String title;
String content;
MyDialog({
this.title = "", this.content = ""});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Material(
type: MaterialType.transparency,
child: Center(
child: Container(
height: 300,
width: 300,
color: Colors.white,
child: Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Text("$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(
"$content",
textAlign: TextAlign.left,
),
)
],
),
)),
);
}
}
在按钮页面导入，在showDialog中返回我们自定义的对话框
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return MyDialog(
title: "关于我们",
content: "关于我们1111",
);
});
},
child: Text("toast-fluttertoast第三方库"),
),
定时器
使用时要导入
import 'dart:async';
定时器使用的方法
_showTimer(context) {
var timer;
timer = Timer.periodic(
Duration(milliseconds: 5000), (t) {
print("执行");
Navigator.pop(context);
t.cancel(); //取消定时器
});
}
然后再build中调用，达到定时器设置的时间对话框就会消失
@override
Widget build(BuildContext context) {
_showTimer(context);
}