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

我的用户界面：

Link for my UI

Answer 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

根据source code，使用ButtonBar来强制对齐，因此，如果要更改对齐方式，应将AlertDialog用ButtonBarTheme包装。

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,
              ),
            ],
          )
        ],
      )
    );
  }
}

结果：

Flutter：如何使对话框的按钮居中？

2 个答案: