flutter - 如何在 Flutter 中将 AlertDialog FlatButton 居中

Question

如何在不创建自定义 AlertDialog 的情况下设置 FlatButton 的样式使其居中对齐？

AlertDialog(
      title: Text(
        'Alert Dialog'.toUpperCase(),
        textAlign: TextAlign.center,
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28.0),
      ),
      content: SingleChildScrollView(
        child: ListBody(
          children: <Widget>[
            Text('Scrollable AlertDialog' * 100),
          ],
        ),
      ),
      actions: <Widget>[
        FlatButton(
          child: Text(
            'Accept'.toUpperCase(),
          ),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );

This is how it looks like

我尝试删除“actions”并在“content”的一行内添加 FlatButton，但滚动停止工作并且内容溢出。

content: Column(
        children: <Widget>[
          SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('Scrollable AlertDialog.' * 50),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              FlatButton(
                child: Text(
                  'Accept'.toUpperCase(),
                  style: TextStyle(
                      color: Theme.of(context).primaryColor,
                      fontWeight: FontWeight.bold,
                      fontSize: 16.0
                  ),
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        ],
      ),

Answer 1

Google 的 Material 设计指南不希望您将其放在中心位置，这就是为什么 Flutter 团队将 ButtonBar 用于 actions 而您无法控制 ButtonBar 在 actions 属性中的对齐方式，所以如果您真的想让单个按钮居中，有 2 个简单的解决方法:

1. 修改源代码，在dialog.dart的AlertDialog的build方法中，你会看到一个ButtonBar，widget，给它加上alignment。

   ButtonBar(
     alignment: MainAxisAlignment.center, // add this line 
     // ...
   ) 
   

2. 您可以使用像 SizedBox 这样的虚拟小部件并为其提供一些宽度。

   actions: [
     SizedBox(width: space),
     FlatButton(
       onPressed: () {},
       child: Text('Button'),
     ),
     SizedBox(width: space),
   ]
   

---

截图: