关于dart：如何在Flutter中设置AlertDialog动作的样式


How to style AlertDialog Actions in Flutter

我使用此方法显示AlertDialog：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
_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();
                  })
            ],
          );
        },
      );
    }
  }

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

enter image description here

我想对按钮的样式进行一些设置，例如一个开始一个按钮，另一个结束按钮。
我在文档中进行搜索，但仅找到如何使它们成为"堆叠的全角按钮"。
任何想法如何样式的按钮？

自定义小部件

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

自己的按钮行

您也可以删除actions下的按钮，并添加一个带有RaisedButtons的自定义Row，如下所示：

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

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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();
                              })
                        ])
                    ],
                  ),
                );
              });
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
_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();
                  })
              ],
            ),
          );
        },
      );
    }
  }

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

1
2
3
4
5
6
MaterialApp(
  theme: ThemeData(
      buttonBarTheme: ButtonBarThemeData(
    alignment: MainAxisAlignment.center,
  )),
  ...
相关讨论

或者，您可以使用RFlutter Alert库。它易于定制且易于使用。它的默认样式包括圆角，您可以根据需要添加任意数量的按钮。

警报样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var alertStyle = AlertStyle(
    animationType: AnimationType.fromTop,
    isCloseButton: false,
    isOverlayTapDismiss: false,
    descStyle: TextStyle(fontWeight: FontWeight.bold),
    animationDuration: Duration(milliseconds: 400),
    alertBorder: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(0.0),
    side: BorderSide(
        color: Colors.grey,
    ),
    ),
    titleStyle: TextStyle(
    color: Colors.red,
    ),
);

并将您的AlertStyle对象关联到Alert的样式字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Alert(
    context: context,
    style: alertStyle,
    type: AlertType.info,
    title:"RFLUTTER ALERT",
    desc:"Flutter is more awesome with RFlutter Alert.",
    buttons: [
    DialogButton(
        child: Text(
       "COOL",
        style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        onPressed: () => Navigator.pop(context),
        color: Color.fromRGBO(0, 179, 134, 1.0),
        radius: BorderRadius.circular(0.0),
    ),
    ],
).show();

*我是RFlutter Alert的开发人员之一。