DropdownButton2菜单分隔线问题：选中项边框异常求解

你遇到的核心问题是DropdownButton2的选中项显示区域和下拉菜单里的菜单项共用了同一套UI模板，导致边框样式同时作用在两个区域。解决思路是把选中项的按钮显示样式和菜单内的项样式分开定制，具体实现如下：

方案：用selectedItemBuilder单独定制按钮显示的选中项 #

通过selectedItemBuilder属性，你可以单独定义下拉按钮收起时的选中内容（不带分隔边框），而菜单里的所有菜单项（包括选中状态的）保持正常的分隔边框，彻底解决边框错位的问题。

修改后的完整代码：

DropdownButton2<int>(
  onMenuStateChange: (bool value) {
    BlocProvider.of<MenuAvailabilityBloc>(context)
        .add(DropDownTappedEvent(isDropDownClosed: value));
  },
  // 单独定制按钮收起时的选中项样式（无分隔边框）
  selectedItemBuilder: (BuildContext context) {
    return [0,1].map((int item) { // 这里的列表要和items的value对应
      return Container(
        width: 150,
        padding: const EdgeInsets.only(left: 15),
        child: Text(item == 0 ? '1' : '2'),
      );
    }).toList();
  },
  items: [
    DropdownMenuItem(
      value: 0,
      child: Container(
        width: 150,
        padding: const EdgeInsets.only(left: 15),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(color: appBloc.state.appTheme.fieldBorder),
          ),
        ),
        child: const Text('1'),
      ),
    ),
    DropdownMenuItem(
      value: 1,
      child: Container(
        width: 150,
        padding: const EdgeInsets.only(left: 15),
        // 最后一项可以去掉下边框，避免菜单底部多一条线
        decoration: BoxDecoration(
          border: selectedValue == 1 ? null : Border(
            bottom: BorderSide(color: appBloc.state.appTheme.fieldBorder),
          ),
        ),
        child: const Text('2'),
      ),
    ),
  ],
  value: selectedValue,
  isExpanded: true,
  iconStyleData: IconStyleData(
    icon: SvgPicture.asset(eSvgAssets.downArrow),
  ),
  onChanged: (int? newValue) {
    BlocProvider.of<MenuAvailabilityBloc>(context)
        .add(NewValueSelectEvent(selectedValue: newValue!));
  },
  menuItemStyleData: const MenuItemStyleData(
    padding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
  ),
  dropdownStyleData: const DropdownStyleData(
    padding: EdgeInsets.symmetric(vertical: 0),
    width: 150,
    decoration: BoxDecoration(color: Colors.white),
  ),
);

关键细节说明 #

• selectedItemBuilder返回的是按钮收起时的显示UI，这里我们去掉了边框，只保留文本和内边距，和菜单内的项做区分。
• 菜单内的所有DropdownMenuItem正常添加下边框作为分隔线，最后一项可以通过判断去掉边框，避免菜单底部多余线条。
• 不需要再用selectedValue和isDropDownClosed控制边框颜色，逻辑更简洁，也不会出现菜单内选中项丢失边框的问题。

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