如何在 Flutter 中将 AlertDialog FlatButton 居中

Posted 2023-02-23

【中文标题】如何在 Flutter 中将 AlertDialog FlatButton 居中

【英文标题】：How to center AlertDialog FlatButton in Flutter

【发布时间】：2020-07-02 14:18:07

【问题描述】：

如何在不创建自定义 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

我尝试删除“操作”并在“内容”的一行中添加 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();
                ,
              ),
            ],
          ),
        ],
      ),

【参考方案1】：

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

更改源代码，在dialog.dart 的AlertDialog 的build 方法中，你会看到一个ButtonBar，小部件，添加alignment 到它。

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

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

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

---

截图：

【参考方案2】：

尝试使用作为 AlertDialog 属性之一的 actionsPadding。

final horizontalPadding=50;

水平填充是对对话框左右透明的填充。

actionsPadding: EdgeInsets.only(right: MediaQuery.of(context).size.width/2-horizontalPadding*2),

另外，请通过 How to style AlertDialog Actions in Flutter 。如此处所述，您可以在库中进行更改和玩耍。 但是，这可能不适用于共享 git 存储库的同事。他们还必须在本地计算机上更新他们的库。

【参考方案3】：

    actions: <Widget>[
      Align(
        alignment: Alignment.center,
        child: ElevatedButton(
            onPressed: () 
              //your logic
              Navigator.pop(context);
             ,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Close'),
            ),
          ),
      ),
    ],