Flutter中的彈框
一起從0開始學習Flutter!
在Flutter中我們也有着豐富的彈出框控件，Flutter給我們準備好了SimpleDialog，AlertDialog，AboutDialog，CupertinoAlertDialog這些彈出框，我們可以依次來認識它們。
在認識它們之前還需要先學習一下如果讓這些組件顯示在屏幕上，這些組件創建完之後是否直接顯示的，我們還需要調用一個show方法，比如showDialog();showAboutDialog();showCupertinoDialog();這樣的顯示方法。
Show方法
show方法是根據想要顯示的對話框的樣式不同進行了封裝，showDialog可以放下我們想要的所有dialog，只是針對不同的dialog會有時比較繁瑣，我們先看下showDialog方法中需要傳入哪些參數：
Future<T> showDialog<T>({
@required BuildContext context, //傳入上下文
bool barrierDismissible = true, //點擊遮罩層是否對話框消失
@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. '
'This feature was deprecated after v0.2.3.'
)
Widget child,//過時了，不再使用
WidgetBuilder builder, //需要構建的對話框
bool useRootNavigator = true, //是否將dialog放到根的Navigator中，默認是添加的
})
如果我們想要一個AboutDialog那麼我們可以直接使用showAboutDialog()方法來直接創建一個AboutDialog。AboutDialog我們一般用來顯示應用的基本信息，用的比較少，我們看下showAboutDialog():
void showAboutDialog({
@required BuildContext context,//傳入上下文
String applicationName,//傳入應用的名字
String applicationVersion,//應用的版本號
Widget applicationIcon,//應用的圖標
String applicationLegalese,//添加一些應用的文字說明
List<Widget> children,//添加一些自定義的子控件，根據大家的需要自行補充就行
bool useRootNavigator = true,//是否將dialog放到根的Navigator中，默認是添加的
})
如果我們想要創建一個iOS風格的dialog，那麼我們可以使用showCupertinoDialog();來直接創建，可以看下showCupertinoDialog():
Future<T> showCupertinoDialog<T>({
@required BuildContext context, //傳入上下文
@required WidgetBuilder builder,//需要構建的對話框
bool useRootNavigator = true,//是否將dialog放到根的Navigator中，默認是添加的
})
可以看到跟showDialog基本上是一致的，我們只需要在builder裏傳入CupertinoDialog或者CupertinoAlertDialog就可以了。
如果我們想要給彈出框的時候增加一個動畫我們可以使用showGeneralDialog，我們可以根據自己需要制定旋轉縮放等動畫，先看下它的構造：
Future<T> showGeneralDialog<T>({
@required BuildContext context,//必填
@required RoutePageBuilder pageBuilder,//必填，如果沒有要傳入的builder需要傳入一個空的，例如 (context, anim1, anim2) {},
bool barrierDismissible,//控制彈出框是否顯示的，如果爲True那麼barrierLabel必須設置，如果設置爲False則彈出框不會顯示
String barrierLabel,//在barrierDismissible爲True的時候必須有值，否則彈出框不會顯示
Color barrierColor,//動畫的背景
Duration transitionDuration,//dialog顯示和消失的時間，對應這裏就是顯示的動畫時間
RouteTransitionsBuilder transitionBuilder,//我們可以組件自己的顯示動畫
bool useRootNavigator = true,//是否將dialog放到根的Navigator中，默認是添加的
})
我們對上面的show方法舉個例子，一個旋轉的對話框：
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel:"旋轉框" ,
transitionDuration: Duration(milliseconds: 400),
transitionBuilder: (context, anim1, anim2, child) {
return Transform.rotate(
angle: anim1.value * 360,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
title: Text("Dialog"),
content: Text("Hello world"),
),
);
},
);
SimpleDialog
一般我們使用SimpleDialog用於多項條目的選擇框，我們可以先看下它的構造方法：
const SimpleDialog({
Key key,
this.title,//彈出框的標題欄
this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),//標題的上下左右間距
this.children,//這裏可以添加選擇條目,這裏添加的不是普通的組件了，是需要傳入SimpleDialogOption
this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),//內容與邊框之間的間距
this.backgroundColor,//彈出框的背景顏色
this.elevation,//彈出框的陰影大小
this.semanticLabel,//輔助功能中的語音提示
this.shape,//彈出框的形狀。比如設置圓角邊框
})
SimpleDialogOption
作爲SimpleDialog的children項，我們看下它可以爲我們做些什麼，先看下它的構造方法：
const SimpleDialogOption({
Key key,
this.onPressed,//點擊的響應事件
this.child,//添加的子組件
})
這裏我們就可以把每個條目的點擊事件和每個條目要顯示的內容來做顯示了。例如：
SimpleDialogOption(
child: Text("條目一"),
onPressed: (){
Navigator.of(context).pop();
},)
這裏我們就顯示了一個條目並且點擊後整個彈出框消失。
AlertDialog
用於展示一些提示信息的dialog，我們可以爲dialog添加多個按鈕，我們先看下它的構造，和SimpleDialog裏面相同的就省略了：
const AlertDialog({
Key key,
this.titleTextStyle,//給標題增加字體的樣式，樣式的設置同Text的樣式設置方法
this.content,//我們用來展示要顯示的內容，需要注意的是如果內容過長我們需要使用可滾動的佈局列表來展示，否則無法全部顯示
this.contentTextStyle,//給展示的內容添加文字的全局樣式
this.actions,//這裏我們可以添加確定和取消等按鈕，如果能橫向全部展示則會顯示全部，如果不能全部顯示則全部按鈕豎向顯示
...
})
AboutDialog
一般用來顯示一些應用的基本信息，會默認帶着兩個按鈕，一個ViewLicences跳轉到應用的Licences的頁面,一個Close用來關閉dialog，我們來看下它的構造：
const AboutDialog({
Key key,
this.applicationName,//應用名稱
this.applicationVersion,//應用的版本
this.applicationIcon,//應用的icon
this.applicationLegalese,//放一些應用的說明
this.children,//可以添加自定義控件
})
CupertinoAlertDialog
用來顯示iOS風格的dialog，基本用法與AlertDialog一致，在使用CupertinoAlertDialog時我們需要修改show方法爲showCupertinoDialog，我們主要看下差異的部分，先看下它的構造：
const CupertinoAlertDialog({
Key key,
this.scrollController,//給內容的滾動添加一個控制器，我們可以參照前面NestedScrollView所介紹的Controller
this.actionScrollController,//給action的滾動添加一個控制器，action在傳入多個按鈕的時候會呈現豎直排列
this.insetAnimationDuration = const Duration(milliseconds: 100),//顯示彈框的動畫時間
this.insetAnimationCurve = Curves.decelerate,//進入動畫的曲線，也就是進入的路徑
...
})
基本上我們常用的彈出框就介紹完了，我們可以結合項目選擇合適的對話框來顯示，如果需要自定義彈框的可以根據上面的介紹來創建自定義對話框。