如何更好地适配启用isExpanded的DropdownButtonFormField？

针对大字号下DropdownButtonFormField设置isExpanded: true后，选中项/初始值无法正确适配显示的问题，可通过以下方案解决：

核心思路 #

DropdownButtonFormField默认的选中项渲染逻辑不支持多行文本自动适配，需要自定义选中项的显示组件，同时保证容器有足够高度容纳换行后的内容。

具体修改步骤 #

1. 新增selectedItemBuilder属性，单独控制选中项的渲染逻辑，让长文本能自动换行；
2. 保留外层ConstrainedBox的最小高度约束（若文本行数更多，可适当调高minHeight）；
3. 调整InputDecoration的内边距，避免内边距挤压文本显示空间。

修改后的代码示例 #

ConstrainedBox(
  constraints: const BoxConstraints(
    minHeight: 70.0,
  ),
  child: DecoratedBox(
    decoration: CustomViewStyle.textBoxDecoration,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: DropdownButtonFormField<PermitCertificateType>(
        isExpanded: true,
        style: CustomTextStyle.textBoxTextStyle,
        value: widget.permitCertificateRecord?.permitCertificateType,
        // 自定义选中项的显示逻辑
        selectedItemBuilder: (context) {
          return snapshot.data!.map((item) {
            return Wrap(
              children: [
                Text(
                  item.name,
                  style: CustomTextStyle.textBoxTextStyle,
                  softWrap: true,
                ),
              ],
            );
          }).toList();
        },
        decoration: InputDecoration(
          hintText: 'Permit/Certificate Type',
          hintStyle: CustomTextStyle.dropdownHintTextStyle,
          errorStyle: CustomTextStyle.errorStyle,
          // 调整内边距避免文本被挤压
          contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 0),
          border: InputBorder.none, // 外层已有DecoratedBox，可去掉默认边框
        ),
        hint: Text(
          "Permit/Certificate Type",
          style: CustomTextStyle.adapterTextTextStyle,
        ),
        items: snapshot.data!.map((PermitCertificateType value) {
          return DropdownMenuItem<PermitCertificateType>(
            value: value,
            child: Wrap(
              children: [
                Text(
                  value.name,
                  style: CustomTextStyle.textBoxTextStyle,
                  softWrap: true,
                ),
              ],
            ),
          );
        }).toList(),
        validator: (value) {
          if (value == null) {
            return 'Missing Permit/Certificate Type';
          }
          return null;
        },
        onChanged: (text) async {},
        onSaved: (value) {
          _permitCertificateTypeId = value!.id;
        },
      ),
    ),
  ),
)

额外说明 #

• selectedItemBuilder和下拉选项的items是独立控制的，必须单独配置才能让选中项支持多行文本；
• 若自定义文本样式设置了固定行高，需确保行高足够，避免文本被截断；
• 如果仍存在高度适配问题，可适当调高ConstrainedBox的minHeight值。

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