Flutter：Model S手机上两个DropdownButtonFormField横向布局溢出求助

核心问题分析 #

• 第二个DropdownButtonFormField溢出的直接原因是isExpanded: false，组件会优先适配自身内容宽度，忽略父容器的约束，导致小屏设备上超出可用空间。
• 冗余的Container、SizedBox层级增加了布局复杂度，干扰了约束的正常传递。

解决方案步骤 #

1. 开启isExpanded属性：将两个DropdownButtonFormField的isExpanded设为true，强制组件填充父容器分配的宽度。
2. 调整Flex比例：通过Flexible的flex属性设置2:3的宽度比例（对应原需求的40%:60%），无需额外的maxWidth约束。
3. 简化布局层级：移除不必要的Container和SizedBox，让Flexible直接包裹DropdownButtonFormField，提升布局效率。
4. 处理选项文本溢出：给DropdownMenuItem中的Text添加overflow: TextOverflow.ellipsis，避免长选项文本溢出。

优化后的完整代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: AppStyle.backgroundColorGreen,
    body: SingleChildScrollView(
      child: Form(
        key: _key,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 30),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 2, // 占比2份（对应40%）
                child: DropdownButtonFormField<String>(
                  style: const TextStyle(fontSize: 11, color: AppStyle.colorGrey),
                  decoration: InputDecoration(
                    prefixIcon: const Icon(
                      Icons.filter_alt,
                      color: Color.fromRGBO(19, 119, 0, 1),
                    ),
                    contentPadding: const EdgeInsets.symmetric(vertical: 15, horizontal: 8),
                    isCollapsed: true,
                    filled: true,
                    fillColor: Colors.white,
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.grey, width: 0.3),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.grey, width: 0.3),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.grey, width: 0.3),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                  iconSize: 0,
                  hint: const Text("Filtrer par :"),
                  isExpanded: true, // 关键：强制填充父容器宽度
                  value: plantFilter,
                  onChanged: (String? newValue) {
                    setState(() {
                      plantFilter = newValue;
                    });
                  },
                  items: <String>[
                    'Roses',
                    'Tulipes',
                    'Lys',
                    'Orchidées'
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                ),
              ),
              const SizedBox(width: 10), // 添加间距，避免两个组件紧贴
              Flexible(
                flex: 3, // 占比3份（对应60%）
                child: DropdownButtonFormField<String>(
                  style: const TextStyle(fontSize: 11, color: AppStyle.colorGrey),
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.symmetric(vertical: 15, horizontal: 8),
                    isCollapsed: true,
                    filled: true,
                    fillColor: Colors.white,
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.grey, width: 0.3),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.grey, width: 0.3),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.grey, width: 0.3),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                  hint: const Text("Filtrer par :"),
                  isExpanded: true, // 关键：强制填充父容器宽度
                  value: postFilter,
                  onChanged: (String? newValue) {
                    setState(() {
                      postFilter = newValue;
                    });
                  },
                  items: <String>[
                    'Voir tous les postes',
                    'Voir les postes gardés',
                    'Voir les postes non gardés'
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                        overflow: TextOverflow.ellipsis, // 处理长文本溢出
                      ),
                    );
                  }).toList(),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

额外优化建议 #

• 提取InputDecoration为公共变量：两个Dropdown的装饰几乎一致，可封装成一个方法或变量，减少代码重复。
• 使用Theme统一样式：如果项目中有多个类似表单组件，可通过Theme调整默认样式，进一步简化代码。
• 移除不必要的LayoutBuilder：当前布局不需要依赖父容器的maxWidth，用Flex的比例分配已经足够实现响应式。

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