在Flutter中创建对话框

你可以在几乎所有的移动应用程序上看到对话框。大多数应用程序使用对话框来发出警告或促进中间操作，这是应用程序主要流程的一个替代方案。

举个例子，假设有一个提交按钮，当用户按下提交按钮时，会显示一个对话框，以表明该操作已经完成，并包括下一步的指示。这是一个来自主流程的中间动作。

因为对话框对移动应用程序来说是必不可少的，Flutter为警报和全屏对话框提供了便利，也让你可以选择创建自定义对话框。我们将介绍Flutter中对话框的这些方面。

• 在Flutter中创建一个警报对话框
• 将动作按钮应用于对话框
• 关闭和解除对话框
• 创建一个自定义对话框
• 创建一个全屏对话框

在Flutter中创建一个警报对话框

首先，让我们创建一个简单的对话框。AlertDialog 小组件提供了在Flutter中创建一个基本对话框所需的所有功能。title 和content 属性应被指定以显示一个适当的对话框。这两个属性都不是必须的，但如果你不正确地指定这些属性，你将看不到任何内容或标题。

AlertDialog(
  title: Text("Success"),
    content: Text("Save successfully"),
)

复制代码

如果你想显示一个iOS风格的对话框，你可以使用CupertinoAlertDialog widget而不是AlertDialog widget。

CupertinoAlertDialog(
  title: Text("Success"),
    content: Text("Saved successfully"),
)

复制代码

现在的问题是，我们怎样才能显示这个对话框？这就是为什么我们需要使用showDialog 方法，这有助于在应用程序的当前上下文上方显示对话框。这将照顾到在显示对话框时添加深色的透明层。

你可以创建一个按钮(ElevatedButton/TextButton)，像下面这样在showDialog 方法中添加onPressed 方法，在你按下按钮时显示。

ElevatedButton(
  child: Text("Show Me the Dialog"),
  onPressed:(){
    showDialog(context: context, builder: (BuildContext context){
    return AlertDialog(
      title: Text("Success"),
      content: Text("Saved successfully"),
    );
    });
  }
)

复制代码

你可以根据你的需要，通过设置backgroundColor 和titleTextStyle 属性来进一步定制对话框。但是这些属性在CupertinoAlertDialog widget中是不可用的，只能在AlertDialog widget中使用。

默认的AlertDialog 的边框半径为4。shape 属性让你可以根据需要灵活地定制这个值。但是CupertinoAlertDialog ，不允许用户自定义这些属性，你必须坚持使用默认值。

AlertDialog(
  title: Text("Success"),
  titleTextStyle: TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 20),
  backgroundColor: Colors.greenAccent,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  content: Text("Save successfully"),
)

复制代码

将动作按钮应用到对话框中

AlertDialog 小组件可以指定需要在对话框中显示的行动按钮。这些按钮将显示在对话框的底部。

你可以拥有的行动按钮的数量没有限制。但最好使用1-3个动作按钮，以获得良好的用户体验和不那么杂乱的用户界面。

      
AlertDialog(
  title: Text("Success"),
  titleTextStyle: 
    TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.black,fontSize: 20),
    actionsOverflowButtonSpacing: 20,
    actions: [
      ElevatedButton(onPressed: (){
      }, child: Text("Back")),
      ElevatedButton(onPressed: (){
      }, child: Text("Next")),
    ],
    content: Text("Saved successfully"),
)

复制代码

在CupertinoAlertDialog ，而不是普通的按钮，CupertinoDialogAction 小部件必须在actions 小部件阵列里面使用。

CupertinoAlertDialog(
  title: Text("Success"),
  actions: [
    CupertinoDialogAction(onPressed: (){
    }, child: Text("Back")),
    CupertinoDialogAction(onPressed: (){
    }, child: Text("Next")),
  ],
  content: Text("Saved successfully"),
)

复制代码

如果你的应用程序需要更多的动作按钮，你可以根据你的需要添加更多。如果没有空间显示在一个内联中，这些将堆积成一列。如果发生这种溢出，你可以通过设置actionsOverflowButtonSpacing 属性来控制按钮的间距。

actionsOverflowButtonSpacing 属性只在AlertDialog widget中可用，在CupertinoAlertDialog 中不可用。在CupertinoAlertDialog ，它通常每行最多显示两个按钮，如果有更多的动作按钮，这些按钮将被垂直显示。

AlertDialog(
  title: Text("Success"),
  titleTextStyle: 
    TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 20),
  actionsOverflowButtonSpacing: 20,
  actions: [
    ElevatedButton(onPressed: (){

    }, child: Text("Back")),
    ElevatedButton(onPressed: (){

    }, child: Text("Next")),
    ElevatedButton(onPressed: (){

    }, child: Text("Next")),
    ElevatedButton(onPressed: (){

    }, child: Text("Next")),
    ElevatedButton(onPressed: (){

    }, child: Text("Next")),
    ElevatedButton(onPressed: (){

    }, child: Text("Next")),
  ],
  content: Text("Saved successfully"),
)

复制代码

CupertinoAlertDialog(
  title: Text("Success"),

  actions: [
    CupertinoDialogAction(onPressed: (){

    }, child: Text("Back")),
    CupertinoDialogAction(onPressed: (){

    }, child: Text("Next")),
    CupertinoDialogAction(onPressed: (){

    }, child: Text("Next")),
    CupertinoDialogAction(onPressed: (){

    }, child: Text("Next")),
    CupertinoDialogAction(onPressed: (){

    }, child: Text("Next")),
    CupertinoDialogAction(onPressed: (){

    }, child: Text("Next")),
  ],
  content: Text("Saved successfully"),
)

复制代码

关闭和解散对话框

你可以使用Navigator 类来在你按下按钮时移除对话框。

AlertDialog(
  title: Text("Success"),
  titleTextStyle: TextStyle(
    fontWeight: FontWeight.bold,color: Colors.black,fontSize: 20),
  actions: [
    ElevatedButton(onPressed: (){
    Navigator.of(context).pop();
    }, child: Text("Close")),
  ],
  content: Text("Saved successfully"),
)

复制代码

创建一个自定义的对话框

AlertDialog 小组件可能不适合您在应用程序中处理的每个自定义场景。这时，Dialog 小组件就派上用场了。

即使AlertDialog 的内容属性接受widget 类型，但建议只添加一个简单的对话信息，这意味着它不适合自定义对话框。

另一方面，Dialog widget可以根据你的需要创建一个自定义版本的对话框。我添加了一个Container 来控制对话框的高度，在Container 里面，有一个Column 小部件来垂直布置多个小部件。你可以根据你的需要来定制这些小部件。

Dialog(
  child: Container(
    height: 300,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        FlutterLogo(size: 150,),
        Text("This is a Custom Dialog",style:TextStyle(fontSize: 20),),
        ElevatedButton(

        onPressed: (){
        Navigator.of(context).pop();
          }, child: Text("Close"))
      ],
    ),
  ),
)

复制代码

如果你想改变对话框的形状，你可以像下面的例子一样为ShapeBorder ，设置shape 属性。这里我使用了一个RoundedRectangleBorder widget来改变对话框的边界半径。

Dialog(
  shape: RoundedRectangleBorder(
    borderRadius:BorderRadius.circular(30.0)),
  child: Container(
    height: 300,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        FlutterLogo(size: 150,),
        Text("This is a Custom Dialog",style:TextStyle(fontSize: 20),),
        ElevatedButton(

        onPressed: (){
        Navigator.of(context).pop();
          }, child: Text("Close"))
      ],
    ),
  ),
) 

复制代码

对话框的默认标高为24。标高是对话框的_Z_坐标，可以通过设置对话框的elevation 属性来改变。如果你把标高设置为0，你可以看到没有阴影，它显示的对话框和下面的视图都是在同一个表面上。

对于AlertDialog ，对话框的背景颜色可以通过改变Dialog 小组件的backgroundColor 属性来设置。

Dialog(
  elevation: 0,
  backgroundColor: Colors.limeAccent,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(30.0)),
  child: Container(
    height: 300,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        FlutterLogo( size: 150,),
        Text(
          "This is a Custom Dialog",
          style: TextStyle(fontSize: 20),
        ),
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text("Close"))
       ],
    ),
  ),
)

复制代码

创建一个全屏对话框

创建全屏对话框不能通过showDialog 方法完成。相反，请使用showGeneralDialog 方法。

在pageBuilder ，你应该指定你的对话框部件实现。作为第一个部件，你可以指定SizedBox.expand 部件，它可以将你的普通对话框转换为全屏对话框。

除了pageBuilder 属性外，你还可以通过transitionDuration 属性来控制对话框的动画持续时间，以给出漂亮而流畅的动画。

showGeneralDialog(
  context: context,
  transitionDuration: Duration(milliseconds: 400),
  pageBuilder: (bc, ania, anis) {
    return SizedBox.expand(
      child: Container(
        color: Colors.black,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              FlutterLogo(
               size: 200,
              ),
              Text(
                "This is a Full Screen Dialog",
                style: TextStyle(
                fontSize: 20,
                decoration: TextDecoration.none),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
              child: Text("Close"))
            ],
          ),
        ),
      ),
    );
})

复制代码

结论

应用警报对话框、自定义对话框或全屏对话框将完全取决于你的应用程序和该应用程序的不同使用情况。

警报对话框更适用于向用户发出快速和简单的警报，如成功信息或信息警报。自定义对话框可以用在需要更多个性化对话框的地方，有多个小工具。如果你想给用户一个全新的屏幕的感觉，而不需要实际导航到一个全新的屏幕，就可以使用全屏对话框。

在这些对话框中，自定义对话框将是最有用的，因为你可以为每个对话框赋予你自己的个人风格，同时保持你的应用程序的主题。

原文链接：
blog.logrocket.com/creating-di…