如何为DropdownButtonFormField下拉列表添加分隔线且选中后不显示

问题根源：DropdownMenuItem的child会同时用于下拉展开的选项列表和选中后的按钮展示区域，所以你嵌套在Column里的分隔线也会被带到选中展示区。

使用DropdownButtonFormField自带的selectedItemBuilder参数单独定义选中后的展示内容即可实现需求，修改后的代码如下：

DropdownButtonFormField(
        isExpanded: true,
        isDense: true,
        value: dropdownValue,
        icon: SvgPicture.asset(
          AppImages.ic_expand_dropdown,
        ),
        iconDisabledColor: AppColors.colorDarkGray,
        iconEnabledColor: AppColors.colorDarkGray,
        focusNode: widget.focusNode,
        validator: widget.validator,
        // 新增selectedItemBuilder配置，单独定义选中后的展示样式
        selectedItemBuilder: (BuildContext context) {
          return widget.pickerList.map<Widget>((value) {
            return Align(
              alignment: Alignment.centerLeft,
              child: Text(
                value,
                style: AppTextStyles.grayDark16(
                  fontWeight: AppFontWeight.medium,
                ),
              ),
            );
          }).toList();
        },
        decoration: InputDecoration(
          label: widget.widgetLabel,
          labelStyle:
              widget.labelStyle ?? AppTextStyles.transparentBlueDark16(),
          labelText: widget.isLabelRes
              ? AppLocales.getTextOrNull(widget.label)
              : widget.label,
          fillColor: Colors.white,
          filled: true,
          hintText: widget.pickerPlaceholder,
          hintStyle: widget.hintStyle ?? AppTextStyles.alto16(),
          alignLabelWithHint: true,
          errorText: widget.isErrorRes
              ? AppLocales.getTextOrNull(widget.error)
              : widget.error,
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 0,
            vertical: 0,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color:
                  widget.enabledBorderColor ?? AppColors.colorInputBorder,
            ),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: widget.focusedBorderColor ?? AppColors.colorAccent,
            ),
          ),
          errorBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: AppColors.colorError,
            ),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color: widget.borderColor ?? AppColors.colorInputBorder,
            ),
          ),
        ),
        style: AppTextStyles.grayDark16(
          fontWeight: AppFontWeight.medium,
        ),
        onChanged: (String? newValue) {
          dropdownValue = newValue;
          widget.onChanged(dropdownValue!);
        },
        // 原有items配置保留，仍然带分隔线用于渲染下拉展开的选项
        items: widget.pickerList.map<DropdownMenuItem<String>>((value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                  ),
                  child: Text(
                    value,
                    style: AppTextStyles.grayDark16(
                      fontWeight: AppFontWeight.medium,
                    ),
                  ),
                ),
                Visibility(
                  child: Divider(
                    color: AppColors.colorEden10,
                    height: 2.0,
                    indent: 10.0,
                    endIndent: 10.0,
                  ),
                  visible: widget.pickerList.last != value,
                ),
              ],
            ),
          );
        }).toList(),
      ),

你原来的其他业务逻辑、样式配置都不需要改动，selectedItemBuilder返回的组件列表只要和下拉选项的顺序一一对应，组件就会自动匹配当前选中值对应的展示内容，不会额外显示分隔线。

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