如何在 Flutter 中设置 AlertDialog 动作的样式 [英] How to style AlertDialog Actions in Flutter

问题描述

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

I use this method to show a 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();
                  })
            ],
          );
        },
      );
    }
  }

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

Everything is working but the buttons are aligned in right as shown on picture below:

我想设计一些按钮的样式，例如一个在开始，另一个在结束.我在文档中搜索，但只找到了如何使它们成为堆叠全角按钮".任何想法如何设置按钮样式?

I want to style some how the buttons, for example one on start other on end. I searched in docs but only found how to make them "Stacked full-width buttons". Any ideas how to style the buttons?

推荐答案

自定义小部件

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

Edit the the widget itself: Under the AlertDialog there is a ButtonBar widget where you can use alignment: MainAxisAlignment.spaceBetween to align the buttons correctly. See this answer for an example of a custom AlertDialog widget.

自己的按钮行

您还可以删除 actions 下的按钮并添加自己的自定义 Row 和 RaisedButtons 在里面，就像这样:

You could also remove the buttons under actions and add an own custom Row with RaisedButtons in it, somehow like this:

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

在您的情况下，您可以在 Row 周围添加 Columncontent 并在其中添加您现有的行和您从上面的示例中创建的修改后的行.

In your case you could add a Column around the Row in content and in there add your existing Row and the modified one you created from the above example.

这篇关于如何在 Flutter 中设置 AlertDialog 动作的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！