如何在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下的按钮，并使用

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
    ]
)

在您的情况下，您可以在以下行的周围添加列 content，然后在其中添加您现有的行和根据上述示例创建的修改后的行.

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屋！