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

Question

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

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。

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

Answer 1

您需要IntrinsicWidth与任何Flex小部件组合，例如Expanded这里。

如果你用 包裹所有的孩子Expanded，你最终会均匀地分享他们之间的空间，问题是你实际上不希望这样，因为最终你将Row用 3 个按钮填充所有可用空间很多“空白”空间。

因为您希望所有按钮都与较大的同级按钮具有完全相同的宽度，所以您首先必须用一个Expanded小部件包装每个子级，然后再用Row一个IntrinsicWidth小部件包装每个子级，这将迫使所有子级共享较大级的宽度。

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: () {},
            ),
          )
        ],
      ),
    );
  }
}