Flutter中Row内两个Dropdown按比例布局的UI问题求助

要实现Row内Date下拉框占50%宽度、20%空白间隔、Time下拉框占30%宽度的布局，且自动适配所有设备（不受margin影响），最简洁可靠的方案是利用Expanded和Spacer的flex属性，无需依赖MediaQuery手动计算宽度。

核心实现代码 #

Row(
  children: [
    // Date下拉框：占总可用宽度的50%
    Expanded(
      flex: 5,
      child: DateDropdown(), // 你的日期选择组件
    ),
    // 空白间隔：占总可用宽度的20%
    Spacer(flex: 2),
    // Time下拉框：占总可用宽度的30%
    Expanded(
      flex: 3,
      child: TimeDropdown(), // 你的时间选择组件
    ),
  ],
)

方案优势 #

1. 自动适配父容器宽度：Expanded和Spacer会基于Row的可用宽度（自动排除Row的padding、父容器的margin等）按flex比例分配空间，完全适配不同设备屏幕。
2. 避免手动计算误差：无需通过MediaQuery获取屏幕宽度再计算组件尺寸，彻底解决margin导致的布局偏移问题。
3. 代码简洁易维护：通过flex值直接对应比例（5/10=50%，2/10=20%，3/10=30%），逻辑清晰，后续调整比例只需修改flex数值即可。

注意事项 #

• 确保DateDropdown和TimeDropdown组件未设置固定宽度，否则会覆盖Expanded的约束，导致比例失效。
• 如果Row本身存在padding（如padding: EdgeInsets.symmetric(horizontal: 16)），Expanded的宽度会自动基于Row的内部可用宽度计算，无需额外调整。

备选方案：LayoutBuilder（手动计算） #

如果你更倾向于手动控制宽度计算，也可以使用LayoutBuilder获取父容器的约束宽度，再按比例分配：

LayoutBuilder(
  builder: (context, constraints) {
    final availableWidth = constraints.maxWidth;
    return Row(
      children: [
        SizedBox(
          width: availableWidth * 0.5,
          child: DateDropdown(),
        ),
        SizedBox(width: availableWidth * 0.2),
        SizedBox(
          width: availableWidth * 0.3,
          child: TimeDropdown(),
        ),
      ],
    );
  },
)

此方案适合需要更精细控制布局约束的场景，但代码量略多，不如Expanded方案简洁。

内容的提问来源于stack exchange，提问作者Dimas Satrya