如何在Flutter中为AlertDialog Actions设置样式

Question

12 浏览2023年7月7日

匿名的 2023年7月7日

0 Comments

我使用这种方法来显示一个AlertDialog：

_onSubmit(message) {


    if (message.isNotEmpty) {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Center(child: Text('警告')),
            content: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children : [
                Expanded(
                  child: Text(
                    message,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                )
              ],
            ),
            actions: [
              FlatButton(
                  child: Text('取消'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
              FlatButton(
                  child: Text('确定'),
                  onPressed: () {
                    _inputTextController.clear();
                    Navigator.of(context).pop();
                  })
            ],
          );
        },
      );
    }
  }

一切都正常工作，但按钮的对齐方式如下图所示在右侧：

enter image description here

我想以某种方式来设置按钮的样式，例如一个在开始，另一个在结束。

我在文档中搜索过，但只找到了如何使它们成为“堆叠的全宽按钮”。

有什么想法如何设置按钮的样式吗？

0

3 答案

匿名的 · Answer 1 · 2023-08-23T10:27:27+00:00

问题的出现原因：

在Flutter中，AlertDialog是一种常用的对话框组件，它通常包含一些操作按钮。然而，在默认情况下，AlertDialog的操作按钮样式可能无法满足特定的设计需求，因此需要对其进行样式定制。

解决方法：

可以通过更改主题来实现AlertDialog操作按钮的样式定制。在Flutter中，可以使用MaterialApp的theme属性来更改整个应用程序的主题，从而影响AlertDialog的样式。

具体的解决方法是在MaterialApp的theme属性中设置buttonBarTheme属性。buttonBarTheme属性是ButtonBarThemeData类型的，可以指定AlertDialog操作按钮的样式。在这里，我们将alignment属性设置为MainAxisAlignment.center，以使操作按钮在AlertDialog中居中显示。

下面是一个示例代码，演示了如何通过更改主题来定制AlertDialog操作按钮的样式：

MaterialApp(


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

)

通过将上述代码添加到应用程序的MaterialApp中，即可更改AlertDialog操作按钮的样式。这样，开发者就可以根据自己的设计需求，定制AlertDialog操作按钮的外观和布局。

匿名的 · Answer 2 · 2023-09-17T12:37:47+00:00

问题：如何在Flutter中样式化AlertDialog的操作按钮？

原因：AlertDialog默认的操作按钮样式可能不符合设计需求，需要进行自定义样式。

解决方法：将按钮移到内容区域中，并通过Row和MainAxisAlignment来调整按钮的布局。

具体代码如下：

showDialog(


  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Center(child: Text('Alert')),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            child: Text(
              "message",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.red,
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              FlatButton(
                child: Text('Yes'),
                onPressed: () {
                  Navigator.of(context).pop();
                }
              ),
              FlatButton(
                child: Text('No'),
                onPressed: () {
                  Navigator.of(context).pop();
                }
              )
            ]
          )
        ],
      ),
    );
  }
);

通过将按钮放置在内容区域中，并使用Row和MainAxisAlignment来调整按钮的布局，可以实现自定义AlertDialog操作按钮的样式。

匿名的 · Answer 3 · 2023-09-03T18:31:38+00:00

如何在Flutter中设置AlertDialog的操作按钮样式？

问题的原因是Flutter在2.5版本中引入了actionsAlignment属性，但在此之前，没有明确的方法可以自定义AlertDialog操作按钮的对齐方式。

解决方法有两种：

1. 编辑AlertDialog自定义小部件：在AlertDialog下面，有一个ButtonBar小部件，您可以使用alignment属性来正确对齐按钮。可以参考Stack Overflow上的一个答案，该答案提供了一个自定义AlertDialog小部件的示例。

2. 删除actions下的按钮，并添加一个自定义的Row，其中包含RaisedButtons。您可以在content中的Row周围添加一个Column，在其中添加现有的Row和上面示例中创建的修改后的Row。

在Flutter 2.5版本中，您还可以使用actionsAlignment属性，无需使用Row，只需将actionsAlignment设置为spaceBetween即可对齐操作按钮。

，根据Flutter的版本不同，可以通过编辑小部件或添加自定义的Row来自定义AlertDialog操作按钮的样式。