Flutter下拉框：仅让选中预览项显示文本截断的实现问询

问题场景 #

你实现的DropdownButton目前存在这个问题：点击展开下拉项时，选项文本被截断了，但你只希望按钮旁的选中项预览显示截断效果，展开的下拉项要完整显示。

原问题代码 #

主DropdownButton代码

return Center(
  child: DropdownButton<ActivityPriority>(
    value: widget.selectedValue != null
        ? dropdownItemsPortrait[checkValueIndex()].value
        : null,
    hint: Text(S.of(context).select),
    items: dropdownItemsPortrait,
    underline: Container(),
    onChanged: (v) {
      setState(() {
        selectedValue = v;
        widget.onSelection(v);
      });
    },
  ),
);

下拉项生成代码

List<DropdownMenuItem> get dropdownItemsPortrait {
  List<DropdownMenuItem<ActivityPriority>> menuItemsPortrait = widget.mList
      .map((e) => DropdownMenuItem(
            child: SizedBox(
              width: 100.0,
              child: Text(
                "statustuisssssss",
                overflow: TextOverflow.ellipsis,
              ),
            ),
            value: e,
          ))
      .toList();
  return menuItemsPortrait;
}

解决步骤 #

1. 修改下拉项生成逻辑，移除文本限制

把下拉项里的SizedBox宽度限制和Text的截断属性去掉，让展开的选项文本完整显示：

List<DropdownMenuItem<ActivityPriority>> get dropdownItemsPortrait {
  List<DropdownMenuItem<ActivityPriority>> menuItemsPortrait = widget.mList
      .map((e) => DropdownMenuItem(
            child: Text("statustuisssssss"), // 直接显示完整文本
            value: e,
          ))
      .toList();
  return menuItemsPortrait;
}

2. 给DropdownButton添加选中项自定义构建器

通过selectedItemBuilder参数，单独定制选中项的显示样式，只在选中预览时做宽度限制和文本截断：

return Center(
  child: DropdownButton<ActivityPriority>(
    value: widget.selectedValue != null
        ? dropdownItemsPortrait[checkValueIndex()].value
        : null,
    hint: Text(S.of(context).select),
    items: dropdownItemsPortrait,
    underline: Container(),
    // 自定义选中项的显示
    selectedItemBuilder: (BuildContext context) {
      return widget.mList.map((item) {
        return SizedBox(
          width: 100.0,
          child: Text(
            "statustuisssssss",
            overflow: TextOverflow.ellipsis,
          ),
        );
      }).toList();
    },
    onChanged: (v) {
      setState(() {
        selectedValue = v;
        widget.onSelection(v);
      });
    },
  ),
);

原理说明 #

selectedItemBuilder是DropdownButton的专属参数，用来单独控制选中状态下按钮内的显示内容，和下拉列表里的选项显示逻辑完全解耦。这样就能实现：选中项预览时截断文本，展开的下拉项完整显示文本的需求。

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