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

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 包裹你所有的 child ，你最终会在它们之间平均分配空间，问题是你实际上不想要那个，因为最终你会有一个 Row用 3 个带有大量“空白”空间的按钮填充所有可用空间。

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

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