例如,我们有下一个小部件:
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。
是的,按钮上的文字可能会有所不同;这就是为什么我们不能预先计算和硬编码它们的宽度。
最佳答案
您需要组合 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: () {},
),
)
],
),
);
}
}
关于flutter - 如何使一行中的小部件与最宽的小部件宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65709450/