如何在 Flutter 中设置 AlertDialog Actions 的样式

发布于07月09日

我使用此方法显示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();
                  })
            ],
          );
        },
      );
    }
  }

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

个

我想设计一些按钮的样式，例如一个在开始，另一个在结束.

推荐答案

Customize widget

编辑小部件本身:在AlertDialog下有一个ButtonBar widget，可以使用alignment: MainAxisAlignment.spaceBetween来正确对齐按钮.有关自定义AlertDialog小部件的示例，请参见this answer.

Own button row个

您还可以删除actions下的按钮，然后添加自己的自定义Row，其中包含RaisedButtons个按钮，如下所示:

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

在您的示例中，您可以在content中的行周围添加一个Column，然后在那里添加您现有的行和从上面的示例创建的修改后的行.