如何使一行中的小部件与最宽的小部件宽度相同答案

【问题标题】：How to make widgets in a row the same width as the widest from them如何使一行中的小部件与最宽的小部件宽度相同
【发布时间】：2021-04-18 21:50:03
【问题描述】：

例如，我们有下一个小部件：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton(
          child: Text('B 1'),
          onPressed: () {},
        ),
        OutlinedButton(
          child: Text('BB 2'),
          onPressed: () {},
        ),
        OutlinedButton(
          child: Text('BBBBB 5'),
          onPressed: () {},
        ),
      ],
    );
  }
}

我们如何创建所有按钮（'B1' 和 'BB 2'），使其与最后一个最宽的按钮（'BBBBB 5'）具有相同的宽度。所以得到的MyWidget宽度将是'BBBBB 5'按钮的宽度乘以3。

是的，按钮上的文字可能会有所不同；这就是为什么我们不能预先计算和硬编码它们的宽度。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您需要将IntrinsicWidth 与任何Flex 小部件组合在一起，例如此处的Expanded。

如果你用Expanded 包裹你所有的孩子，你最终会在他们之间平均分配空间，问题是你实际上不想要那个，因为最终你将有一个 Row 用 3 个按钮填充所有可用空间，其中包含大量“空白”空间。

因为您希望所有按钮的宽度都与较大的兄弟按钮完全相同，所以您首先必须使用 Expanded 小部件包裹每个子按钮，然后使用 IntrinsicWidth 小部件包裹 Row，这将强制所有孩子分享较大的孩子的宽度。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: OutlinedButton(
              child: Text('B 1'),
              onPressed: () {},
            ),
          ),
          Expanded(
            child: OutlinedButton(
              child: Text('BB 2'),
              onPressed: () {},
            ),
          ),
          Expanded(
            child: OutlinedButton(
              child: Text('BBBBB 5'),
              onPressed: () {},
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：