如何在Flutter中设置AlertDialog动作的样式

Question

我用这个方法来显示一个AlertDialog:

_onSubmit(message) {
    if (message.isNotEmpty) {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Center(child: Text('Alert')),
            content: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children : <Widget>[
                Expanded(
                  child: Text(
                    message,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.red,

                    ),
                  ),
                )
              ],
            ),
            actions: <Widget>[
              FlatButton(
                  child: Text('Cancel'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
              FlatButton(
                  child: Text('Ok'),
                  onPressed: () {
                    _inputTextController.clear();
                    Navigator.of(context).pop();
                  })
            ],
          );
        },
      );
    }
  }

一切正常,但按钮右对齐,如下图所示:

我想要设置一些按钮的样式,例如一个按钮开始另一个.我搜索了文档,但只找到了如何使它们成为"堆叠全宽按钮".任何想法如何设置按钮的样式？

Answer 1

自定义小部件

编辑小部件本身:在AlertDialog一个ButtonBar小部件下,您可以使用它alignment: MainAxisAlignment.spaceBetween来正确对齐按钮.有关自定义AlertDialog小部件的示例,请参阅此答案.

自己的按钮行

您也可以删除按钮下actions,并添加自己的自定义Row与RaisedButtons在里面,不知何故是这样的:

Row (
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
        RaisedButton(), // button 1
        RaisedButton(), // button 2
    ]
)

在您的情况下,您可以在行中添加一个列,content并在其中添加您现有的行和您从上面的示例创建的修改后的行.

Answer 2

不要在AlertDialog 的操作中添加按钮。如你看到的。

_onSubmit(message) {
    if (message.isNotEmpty) {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Center(child: Text('Alert')),
            content: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children : <Widget>[
                Expanded(
                  child: Text(
                    message,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.red,

                    ),
                  ),
                ),

         FlatButton(
                  child: Text('Cancel'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
              FlatButton(
                  child: Text('Ok'),
                  onPressed: () {
                    _inputTextController.clear();
                    Navigator.of(context).pop();
                  })
              ],
            ),
          );
        },
      );
    }
  }

Answer 3

改变主题是一个不错的选择。

MaterialApp(
  theme: ThemeData(
      buttonBarTheme: ButtonBarThemeData(
    alignment: MainAxisAlignment.center,
  )),
  ...

Answer 4

将按钮移到内容上是一个很好的解决方案。

showDialog(
              context: context,
              barrierDismissible: false,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Center(child: Text('Alert')),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Container(
                        child: Text(
                          "message",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.red,
                          ),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          FlatButton(
                              child: Text('Yes'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              }),
                          FlatButton(
                              child: Text('No'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              })
                        ])
                    ],
                  ),
                );
              });

Answer 5

我使用此方法来对齐AlertDialog操作中的按钮。

这是如何工作的::

SizedBox 使用其上下文获取警报对话框的整个宽度（在声明 MediaQuery.of( context ).size.width 中。之后，使用一行在主轴上的子项之间放置空间（mainAxisAlignment => x - 一行的轴）。

警报对话框样式：

警报对话框（
        标题：行（
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            孩子们： [
              文本（'倾斜'），
              关闭按钮(
                  颜色：颜色（0xFFD5D3D3），
                  按下： () {
                    Navigator.of(context).pop();
                  })
            ]),
        内容：SingleChildScrollView(child: Text("Boby")),
        行动：[
          大小盒(
              宽度：MediaQuery.of(context).size.width,
              孩子：行（
                  mainAxisAlignment: MainAxisAlignment.center,
                  孩子们： [
                    按钮主题(
                        最小宽度：25.0，
                        高度：25.0，
                        孩子：大纲按钮（
                            边框：边框（颜色：Colors.blueAccent），
                            孩子：新文本（“保存”），
                            形状：RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20)),
                            onPressed: () {})),
                    大小框（宽度：8.0），
                    按钮主题(
                        最小宽度：25.0，
                        高度：25.0，
                        孩子：大纲按钮（
                            边框：边框（颜色：Colors.black26），
                            textColor: Colors.blue,
                            孩子：新文本（“关闭”），
                            形状：RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20)),
                            onPressed: () {}))
                  ]))
        ]);

Answer 6

这是您问题的简单答案：只需在 flutter 中使用 AlertDialog 类的 actionsAlignment 属性即可。像这样

AlertDialog(
  actions: ...,
  actionsAlignment: MainAxisAlignment.spaceBetween
)