Flutter中如何为DropdownBelow添加验证 实现下拉框在按钮下方展开

实现方案 #

你选择用FormField封装DropdownBelow的思路完全正确，调整几个细节就能实现表单校验能力，且不会影响原组件下拉弹窗在按钮正下方展开的特性。

现有代码的问题 #

• FormField泛型设置错误，你存储的选中值为String类型，不应设置为bool
• 选中值变化时未同步给FormField的状态，导致校验逻辑无法感知值的变化
• 没有展示校验返回的错误提示

修改后的完整实现代码 #

// 先定义Form的全局key，用于整表校验
final _formKey = GlobalKey<FormState>();
String? _selectedGender;
final List<String> genderList = ['男', '女', '其他'];

// 页面build方法内的代码
Form(
  key: _formKey,
  child: FormField<String>(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    initialValue: _selectedGender,
    validator: (value) {
      if (value == null) {
        return 'You need to select gender';
      }
      return null;
    },
    builder: (FormFieldState<String> state) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 55.0,
            width: MediaQuery.of(context).size.width * 0.82,
            child: DropdownBelow(
              itemWidth: 350,
              itemTextstyle: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  color: Colors.black),
              boxTextstyle: const TextStyle(
                  fontWeight: FontWeight.w400,
                  color: Colors.black),
              boxPadding: const EdgeInsets.fromLTRB(13, 12, 13, 12),
              boxWidth: 370,
              boxHeight: 50,
              boxDecoration: BoxDecoration(
                  color: Colors.transparent,
                  shape: BoxShape.rectangle,
                  borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                  border: Border.all(
                      width: 1, 
                      // 校验失败时边框变红，可根据需求调整
                      color: state.hasError ? Colors.red : Colors.grey)),
              icon: Icon(
                Icons.keyboard_arrow_down_outlined,
                color: HexColor("#6e6b7b"),
              ),
              hint: Text('Gender',
                  style: GoogleFonts.montserrat(
                      color: HexColor("#6e6b7b"),
                      fontSize: 15)),
              value: _selectedGender,
              items: genderList.map<DropdownMenuItem<String>>(
                  (String value) {
                return DropdownMenuItem<String>(
                    value: value, 
                    child: Text(value,
                      style: GoogleFonts.montserrat(color: HexColor("#6e6b7b"),)
                    )
                );
              }).toList(),
              onChanged: (newValue) {
                setState(() {
                  _selectedGender = newValue as String?;
                });
                // 同步值到FormField状态，触发校验
                state.didChange(newValue);
              },
            ),
          ),
          // 展示错误提示
          if (state.hasError)
            Padding(
              padding: const EdgeInsets.only(left: 13, top: 5),
              child: Text(
                state.errorText!,
                style: const TextStyle(color: Colors.red, fontSize: 12),
              ),
            )
        ],
      );
    },
  ),
)

额外说明 #

• 你可以在提交表单时调用_formKey.currentState?.validate()触发所有表单项的统一校验，返回true则说明所有项校验通过
• 该实现完全保留了DropdownBelow原有的下拉弹窗在按钮正下方展开的特性，和你提供的示例图效果一致
• 边框变色、错误提示的样式都可以根据你的设计需求自行调整

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