如何在 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下的按鈕，並在其中添加一個帶有RaisedButtons的自定義Row ，如下所示：

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

在您的情況下，您可以在content中的行周圍添加一個列，並在其中添加您現有的行和您從上面的示例創建的修改后的行。

Answer 2

將按鈕移動到內容是一個很好的解決方案。

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 3

不要在 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 4

更改主題是一個不錯的選擇。

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

Answer 5

我使用此方法來對齊AlertDialog操作中的按鈕。

這是如何工作的::

SizedBox 使用其上下文（在語句 MediaQuery.of( context ).size.width 中）獲取警報對話框的整個寬度。之后，使用一行在主軸上的子項之間放置空間（mainAxisAlignment => x -軸為一行）。

警報對話框樣式：

AlertDialog(
        title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Title'),
              CloseButton(
                  color: Color(0xFFD5D3D3),
                  onPressed: () {
                    Navigator.of(context).pop();
                  })
            ]),
        content: SingleChildScrollView(child: Text("Boby")),
        actions: [
          SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ButtonTheme(
                        minWidth: 25.0,
                        height: 25.0,
                        child: OutlineButton(
                            borderSide: BorderSide(color: Colors.blueAccent),
                            child: new Text("Save"),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20)),
                            onPressed: () {})),
                    SizedBox(width: 8.0),
                    ButtonTheme(
                        minWidth: 25.0,
                        height: 25.0,
                        child: OutlineButton(
                            borderSide: BorderSide(color: Colors.black26),
                            textColor: Colors.blue,
                            child: new Text("Close"),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20)),
                            onPressed: () {}))
                  ]))
        ]);

Answer 6

或者您可以為此使用RFlutter Alert庫。 它易於定制且易於使用。 它的默認樣式包括圓角，您可以根據需要添加按鈕。

警報樣式：

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 的樣式字段。

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 的開發者之一。

Answer 7

這是您問題的直接答案：只需在 flutter 中使用 AlertDialog class 的 actionsAlignment 屬性。 像這樣

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