Flutter实现两个按钮尺寸统一为最大按钮的大小
Flutter实现等长按钮(仅占用最大按钮的最小必要宽度)
要实现两个按钮等长且仅占用最大按钮的宽度,不用Expanded撑满父容器,可以用IntrinsicWidth配合Expanded的组合方案:
- 用
IntrinsicWidth包裹整个Row,它会自动将Row的宽度限制为其中最宽子组件的宽度,避免多余拉伸。 - 给每个ElevatedButton套一层
Expanded,让按钮填充IntrinsicWidth提供的统一宽度,实现等长效果。
示例代码:
IntrinsicWidth( child: Row( children: [ Expanded( child: ElevatedButton( onPressed: () {}, child: const Text('Some long text'), ), ), const SizedBox(width: 12), // 按钮之间的间距 Expanded( child: ElevatedButton( onPressed: () {}, child: const Text('Short'), ), ), ], ), )
这个方案的核心是IntrinsicWidth的特性:它会先计算子组件中最宽的那个尺寸,再把这个尺寸作为自身的宽度约束传递给内部的Row,Row里的Expanded就会让每个按钮都适配这个宽度,既保证了等长,又不会占用多余空间。
内容的提问来源于stack exchange,提问作者Eddy Todd
相关产品推荐
相关产品推荐

