Flutter Widget 之AlertDialog、CupertinoAlertDialog

你的应用是否具有用户需要做出重要决策的关键节点？你想提醒某人某事或者得到他们的输入吗？尝试使用AlertDialog

根据你的首选设计，如果是Material的话可以使用AlertDialog

或者用于iOS的CupertinoAlertDialg

最基本的对话框是弹出窗口包含一些内容和一些按钮

右上角是title，后面的主要的content，通过是文字，但也可能是动图或者你想要的任何东西

CupertinoAlertDialog(
    title: Text("Accept?"),
    content: Text("Do you accept?"),
);

CupertinoAlertDialog(
    title: Text("Accept?"),
    content: Image("dash.gif"),
);

CupertinoAlertDialog(
    title: Text("Accept?"),
    content: MyFancyWidget(),
);

用户应该清楚如何处理alert, 因此请指定他们如何通过传递给actions参数的按钮来响应alert

CupertinoAlertDialog(
    title: Text("Accept?"),
    content: Text("Do yoou accept?"),
    actions: [
        CupertinoDialogAction("No"),
        CupertinoDialogAction("Yes"),
    ],
);

如果你使用Material

AlertDialog(
    title: Text("Accept?"),
    content: Text("Do you accept?"),
    actions: [
        FlatButton("No"),
        FlatButton("Yes"),
    ],
);

使用Matrerial的AlertDialog会提供额外属性，像卡片一样，你可以更改对话框的elevation,也可以更改background color

AlertDialog(
    title: Text("Accept?"),
    content: Text("Do you accept?"),
    actions: [
        FlatButton("No"),
        FlatButton("Yes"),
    ],
    elevation: 24.0,
    backgroundColor: Colors.blue,
);

如果你真的想要花俏一点的话，可以使用shape参数修改对护框的形状

AlertDialog(
    title: Text("Accept?"),
    content: Text("Do you accept?"),
    actions: [
        FlatButton("No"),
        FlatButton("Yes"),
    ],
    elevation: 24.0,
    backgroundColor: Colors.blue,
    shape: CircleBorder(),
);

CuperDinoAlertDialog和AlertDialog分别与辅助方法 showCuperDinoDialog和shwoDialog配对，可以很好地显示对话框

showDialog具有context和builder返回要显示的特定对话框，然后，你可以告诉它,用户是否可以点击它的外部将其关闭

showDialog(
    context: context,
    builder: (_) => AlertDialog(),
    barrierDismissible: false,
);

ShowDialog和AlertDialog用Material的方式实现了对话框的执行

CupertinoAlertDialog和ShowCupertinoDialog接受许多相同的参数并为iOS渲染

如果想了解有关AlertDialog的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址