前言
本文介紹 Flutter 常用對話框 Widget妒貌，主要有三個 SimpleDialog取具、AlertDialog 和 CupertinoAlertDialog，和底部彈出來的對話框 BottomSheet谦去。
一攒巍、常用的對話框 Widget
在詳細介紹對話框之前，我們先看一下顯示對話框的兩種方法：
- showAboutDialog()
- showDialog()
（1）showAboutDialog()：用來彈關(guān)于對話框
代碼：
import 'package:flutter/material.dart';
class ShowAboutDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ShowAboutDialog',
theme: ThemeData(primaryColor: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text('對話框'),
),
body: Builder(
builder: (context) => RaisedButton(
onPressed: () {
showAboutDialog(
context: context,
applicationName: 'ShowAboutDialog',
applicationVersion: '1.0.0');
},
child: Text('ShowAboutDialog'),
)),
),
);
}
}
運行結(jié)果：
showAboutDialog 構(gòu)造函數(shù)及參數(shù)：
void showAboutDialog({
@required BuildContext context, //必選羊瘩，類型 BuildContext泰佳，應用上下文
String applicationName, //可選，類型 String尘吗，應用的名字
String applicationVersion, //可選逝她，類型 String，應用的版本
Widget applicationIcon, //可選摇予，類型 Widget汽绢，應用的icon
String applicationLegalese, //可選，類型 String侧戴，應用的法律信息
List<Widget> children, //可選宁昭，類型 List<Widget>，添加在后面的 Widget
}) {
...
}
（2）showDialog()：可以彈很多不同種類的 Dialog酗宋。
showDialog() 構(gòu)造函數(shù)及參數(shù)說明：
Future<T> showDialog<T>({
@required BuildContext context, // 必選积仗，類型 BuildContext，應用上下文
bool barrierDismissible = true, // 可選蜕猫，類型 bool寂曹，點擊背景是否可以關(guān)閉 dialog。默認為 true回右，可以關(guān)閉
@Deprecated(
'Instead of using the "child" argument, return the child from a closure '
'provided to the "builder" argument. This will ensure that the BuildContext '
'is appropriate for widgets built in the dialog.'
) Widget child, // 可選隆圆，類型 Widget，要顯示的 Widget翔烁，這個已經(jīng)廢棄了渺氧，請使用 builder
WidgetBuilder builder, // 可選，類型 WidgetBuilder蹬屹，創(chuàng)建要顯示的 Widget
}) {
···
}
showDialog()的使用方法：
Builder(
builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(context: context,builder: (context) => xxxDialog(...));
},
child: Text('showDialog'),
);
},
)
其中 xxxDialog 就是下面我們要介紹的常用Dialog.
1. SimpleDialog
- 作用：顯示有一個標題和多個選項的簡單對話框侣背。
- 代碼示例：
import 'package:flutter/material.dart';
class ShowSimpleDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Dialog',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Dialog'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => SimpleDialog(
title: Text('SimpleDialog Demo'),//對話框標題內(nèi)容
children: <Widget>[
SimpleDialogOption(//選項按鈕
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();//關(guān)閉對話框
},
),
SimpleDialogOption(
child: Text('Cancle'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
child: Text('showDialog'),//主頁面按鈕文本內(nèi)容
);
}),
),
);
}
}
import 'package:flutter/material.dart';
import 'ShowSimpleDialogWidget.dart';
void main() => runApp(ShowSimpleDialogWidget());
-
運行結(jié)果：
- SimpleDialog 構(gòu)造函數(shù)及參數(shù)說明：
class SimpleDialog extends StatelessWidget {
const SimpleDialog({
Key key, // 可選；類型 Key慨默；Widget 的標識
this.title, // 可選贩耐；類型 Key；對話框的標題厦取，通常是Text
this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),// 可選潮太；類型 EdgeInsetsGeometry；標題的邊距
this.children, // 可選蒜胖；類型 List<Widget>消别；對話框的按鈕抛蚤，顯示在對話框標題的下面，通常是一組 SimpleDialogOption
this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0), // 可選寻狂；類型 EdgeInsetsGeometry岁经；內(nèi)容的邊距
this.backgroundColor, // 可選；類型 Color蛇券；對話框的背景
this.elevation, // 可選缀壤；類型 double；Button 相對于其父布局放置的z坐標纠亚，這可以控制 Button 下的陰影大小塘慕，該值必須>=0
this.semanticLabel, // 可選；類型 String；給文本加上一個語義標簽，用于盲人輔助模式下
this.shape, // 可選幅慌；類型 ShapeBorder；Widget 的形狀
}) : assert(titlePadding != null),
assert(contentPadding != null),
super(key: key);
...
}
- SimpleDialogOption 的構(gòu)造函數(shù)及參數(shù)說明
class SimpleDialogOption extends StatelessWidget {
const SimpleDialogOption({
Key key, // 可選蛤织；類型 Key；Widget 的標識
this.onPressed, // 可選鸿染；類型 VoidCallback指蚜；點擊事件，當手指松開時才觸發(fā)
this.child, // 可選涨椒；類型 Widget摊鸡；顯示的內(nèi)容，一般是 Text
}) : super(key: key);
...
}
2. AlertDialog
- 作用：警告對話框
- 代碼示例：
import 'package:flutter/material.dart';
class AlertDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'AlertDialog',
home: new Scaffold(
appBar: new AppBar(
title: new Text('AlertDialog'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('AlertDialog'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('Alert Dialog Title'),
Text('Alert Dialog context'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
child: Text('showAlertDialog'),
);
}),
),
);
}
}
-
運行結(jié)果：
3. CupertinoAlertDialog
- 作用：iOS 風格的 AlertDialog
- 示例代碼：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ShowCupertinoAlertDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'CupertinoAlertDialog',
home: new Scaffold(
appBar: new AppBar(
title: new Text('CupertinoAlertDialog'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text('CupertinoAlertDialog'),
content: Text('This is a CupertinoAlertDialog'),
actions: <Widget>[
CupertinoDialogAction(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
child: Text('showDialog'),
);
}),
),
);
}
}
-
運行結(jié)果：
二蚕冬、底部彈出的對話框 BottomSheet
- PersistentBottomSheet
- ModalBottomSheet
1. PersistentBottomSheet
- 介紹：持續(xù)的底部對話框免猾。當 BottomSheet 彈出時，會一直覆蓋在 APP 的界面上囤热，而且背景是透明的掸刊，所以你還是可以和界面有其他交互，點擊背景不能消失赢乓，只有返回才會消失。
- 使用：可以用 Scaffold 的 showBottomSheet() 方法石窑，也可以設置 Scaffold 的 bottomSheet 參數(shù)牌芋。
- 代碼示例
（1） showBottomSheet()
import 'package:flutter/material.dart';
class ShowPersistentBottomSheetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ShowPersistentBottomSheetWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('ShowPersistentBottomSheetWidget'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showBottomSheet(
context: context,
builder: (context) => BottomSheet(
onClosing: () {},
builder: (context) => Container(
height: 200.0,
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('dismissBottomSheet'),
),
),
),
));
},
child: Text('showBottomDialog'),
);
}),
));
}
}
（2）Scaffold 的 bottomSheet 參數(shù)
直接給 Scaffold 的 bottomSheet 參數(shù)賦 BottomSheet 的實例，這樣 Scaffold 一創(chuàng)建的時候就會顯示 BottomSheet松逊。
import 'package:flutter/material.dart';
class PersistentBottomSheetWidgetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'PersistentBottomSheetWidgetWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('PersistentBottomSheetWidgetWidget'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {},
child: Text('showBottomSheet'),
);
}),
bottomSheet: BottomSheet(
onClosing: () {},
builder: (context) => Container(
height: 200.0,
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('dismissBottomSheet'),
),
),
)),
));
}
}
-
運行結(jié)果：
當 PersistentBottomSheet 出現(xiàn)時躺屁，TitleBar 的右上角會多一個返回的按鈕可以關(guān)閉彈窗。
2. ModalBottomSheet
- 介紹：有半透明背景的對話框经宏。類似 Dialog犀暑，有一個半透明的背景層驯击，點擊背景會消失。
- 使用：只能用 showModalBottomSheet()方法耐亏。
- 代碼示例：
import 'package:flutter/material.dart';
class ShowModalBottomSheetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ShowModalBottomSheetWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('ShowModalBottomSheetWidget'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => BottomSheet(
onClosing: () {},
builder: (context) => Container(
height: 200.0,
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('dismissBottomSheet'),
),
),
),
));
},
child: Text('showBottomSheet'),
);
}),
),
);
}
}
-
運行結(jié)果：
showModalBottomSheet() 方法的定義和參數(shù)說明：
Future<T> showModalBottomSheet<T>({
@required BuildContext context, // 必選徊都；類型 BuildContext；應用上下文
@required WidgetBuilder builder,// 必選广辰；類型 WidgetBuilder暇矫；要顯示的 BottomSheet
}) {
...
}
