Flutter中表单字段放入Row后出现RenderBox布局错误求助

问题根源 #

Row是水平方向的无约束容器，而DropdownButtonFormField默认会尝试占用尽可能多的水平空间，当没有明确的宽度约束时，就会触发RenderBox was not laid out这类布局错误。

解决方案 #

方案1：用Expanded平分空间

给每个DropdownButtonFormField外层套Expanded，让它们自动平分Row的可用水平空间，同时避免无约束问题：

Row(
  children: [
    Expanded(
      child: DropdownButtonFormField<String>(
        decoration: const InputDecoration(labelText: 'Nivel'),
        value: '1', // 可选：设置初始值
        items: ['1', '2', '3']
            .map((item) => DropdownMenuItem(value: item, child: Text(item)))
            .toList(),
        onChanged: (newValue) {
          // 处理选中逻辑
        },
      ),
    ),
    const SizedBox(width: 16), // 增加间距，优化视觉效果
    Expanded(
      child: DropdownButtonFormField<String>(
        decoration: const InputDecoration(labelText: 'Día de Cierre'),
        value: 'Lunes',
        items: ['Lunes', 'Martes', 'Miércoles']
            .map((item) => DropdownMenuItem(value: item, child: Text(item)))
            .toList(),
        onChanged: (newValue) {
          // 处理选中逻辑
        },
      ),
    ),
  ],
)

方案2：设置固定宽度

如果不需要平分空间，可以用SizedBox给每个下拉框指定固定宽度，明确约束：

Row(
  children: [
    SizedBox(
      width: 140,
      child: DropdownButtonFormField<String>(
        decoration: const InputDecoration(labelText: 'Nivel'),
        items: ['1', '2', '3']
            .map((item) => DropdownMenuItem(value: item, child: Text(item)))
            .toList(),
        onChanged: (newValue) {},
      ),
    ),
    const SizedBox(width: 16),
    SizedBox(
      width: 180,
      child: DropdownButtonFormField<String>(
        decoration: const InputDecoration(labelText: 'Día de Cierre'),
        items: ['Lunes', 'Martes', 'Miércoles']
            .map((item) => DropdownMenuItem(value: item, child: Text(item)))
            .toList(),
        onChanged: (newValue) {},
      ),
    ),
  ],
)

额外注意事项 #

如果Row嵌套在Column这类垂直容器中，确保Column有合理的约束：

• 若Column在滚动容器（如SingleChildScrollView）内，可给Column设置mainAxisSize: MainAxisSize.min，避免无约束扩展。
• 不要让Row处于完全无约束的父容器中，确保父级有明确的宽度限制。

内容的提问来源于stack exchange，提问作者HuLu ViCa