使连续的按钮在颤动中具有相同的宽度

Posted 2023-02-23

【中文标题】使连续的按钮在颤动中具有相同的宽度

【英文标题】：Make buttons in a row have the same width in flutter

【发布时间】：2019-03-06 03:14:33

【问题描述】：

如果我想在一个Row 中创建两个或多个Buttons 以拥有相同的Width，我该怎么做？ 例如，我有三个RaisedButtons，标题不同，比如Approve、Reject 和Need Revise，如果我将三个Buttons 放在Row 中，它们将有不同的Width，我不知道不想要。 我需要的是他们有相同的Width。

【参考方案1】：

您可以使用Row 用Expanded 包裹您的孩子：

Row(
  children: <Widget>[
    Expanded(
      child: RaisedButton(
        child: Text('Approve'),
        onPressed: () => null,
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Reject'),
        onPressed: () => null,
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Need Revise'),
        onPressed: () => null,
      ),
    )
  ],
);

【讨论】：

感谢我之前使用的是 Flexible，但使用 Expanded 而不是 Flexible 解决了您的问题。谢谢

如果我们想在列中制作相同的大小怎么办？

嗨，我怎样才能在按钮之间添加空格？

@coderInrRain 检查此链接是否存在您的问题。 ***.com/questions/51684730/…

你拯救了我的一天！

【参考方案2】：

有两种方式：

扩展的小部件它将空间分成相等的部分。如果你使用 列行的所有展开小部件。 获取屏幕的宽度，将其平均分成所需的大小。

双倍宽度 = MediaQuery.of(context).size.width;

【讨论】：

我连续有 7 个按钮。根据移动设备的可用宽度，一行只能有 2-3 个按钮。请建议我如何自动将多个按钮包装成一行？谢谢。

@Kamlesh - 如果您将 Row 更改为 Wrap 小部件（结合此线程上的一些建议），我认为您将获得预期的效果。

【参考方案3】：

可以使用新的按钮样式：

ElevatedButtonTheme(
      data: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(minimumSize: Size(120,60))) ,
      child: ButtonBar(
        mainAxisSize: MainAxisSize.max,
        children: [
          ElevatedButton(
            child: Text('Ok'),
            onPressed: () ,
          ),
          ElevatedButton(
            child: Text('Cancel'),
            onPressed: () ,
          ),
        ],
      ),
    ),

虽然diegoveloper的回答更快