Flutter：如何使對話框的按鈕居中？

Question

我的對話框中有問題，即使我已經有了按鈕也不會居中

mainAxisAlignment: MainAxisAlignment.center, 
crossAxisAlignment: CrossAxisAlignment.center 

在里面。 我的代碼：

actions: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Save',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    saveIssue();
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                width: MediaQuery.of(context).size.width * 0.01,
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Cancel',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.02,
              ),
            ],
          )
        ],                                                                                          

我的用戶界面：

我的用戶界面鏈接

Answer 1

1. 您可以使用 Expanded 來占用可用空間。

    actions: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Expanded( width: MediaQuery.of(context).size.width * 0.20, child: RaisedButton( child: new Text( 'Save', style: TextStyle(color: Colors.white), ), color: Color(0xFF121A21), shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(30.0), ), onPressed: () { saveIssue(); Navigator.of(context).pop(); }, ), ), SizedBox( width: MediaQuery.of(context).size.width * 0.01, ), Expanded( width: MediaQuery.of(context).size.width * 0.20, child: RaisedButton( child: new Text( 'Cancel', style: TextStyle(color: Colors.white), ), color: Color(0xFF121A21), shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(30.0), ), onPressed: () { Navigator.of(context).pop(); }, ), ), SizedBox( height: MediaQuery.of(context).size.height * 0.02, ), ], ) ],

Answer 2

根據源代碼，使用ButtonBar強制 alignment，所以如果你想改變 alignment，你應該用ButtonBarTheme包裝AlertDialog 。

class TestDialog extends StatelessWidget {
  const TestDialog({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ButtonBarTheme(
      data: ButtonBarThemeData(alignment: MainAxisAlignment.center),
      child: AlertDialog(
        content: Text("CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_"),
        actions: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.max,
            //mainAxisAlignment: MainAxisAlignment.center,
            //crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Save',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                width: MediaQuery.of(context).size.width * 0.01,
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Cancel',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.02,
              ),
            ],
          )
        ],
      )
    );
  }
}

結果：

Answer 3

您不需要在操作中使用 Row 小部件。 只需將按鈕賦予操作（這已經是一個列表類型），然后在 AlertDialog class 中使用顫振的新操作對齊屬性。

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

Answer 4

更改

actionsOverflowAlignment: OverflowBarAlignment.center,

在 AlertDialog 的屬性中