You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter实现两个按钮尺寸统一为最大按钮的大小

Flutter实现等长按钮(仅占用最大按钮的最小必要宽度)

要实现两个按钮等长且仅占用最大按钮的宽度,不用Expanded撑满父容器,可以用IntrinsicWidth配合Expanded的组合方案:

  1. 用IntrinsicWidth包裹整个Row,它会自动将Row的宽度限制为其中最宽子组件的宽度,避免多余拉伸。
  2. 给每个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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 21:25:16