Flutter中如何在DropdownMenu项之间添加Divider分割线

因为dropdownMenuEntries仅接受DropDownMenuEntry类型，你可以通过以下几种方式实现分割线效果：

• 自定义分割线样式的DropDownMenuEntry
  直接创建一个仅用于展示分割线的DropDownMenuEntry，通过样式控制它的外观：

  DropDownMenuEntry(
    value: null, // 分割线无需实际值
    label: '',
    style: MenuItemButton.styleFrom(
      padding: EdgeInsets.zero,
      minimumSize: const Size(double.infinity, 1),
      backgroundColor: Colors.grey.shade300,
    ),
  )
  

• 利用MenuItemButton的divider属性（Flutter 3.13+）
  如果你的Flutter版本足够新，可以给需要添加分割线的DropDownMenuEntry配置divider样式，让它在底部显示分割线：

  DropDownMenuEntry(
    value: 'option1',
    label: '选项1',
    style: MenuItemButton.styleFrom(
      divider: const Divider(height: 1, color: Colors.grey.shade300),
    ),
  ),
  DropDownMenuEntry(
    value: 'option2',
    label: '选项2',
  ),
  

• 封装通用分割线组件
  为了复用方便，可以封装一个专门的分割线Entry：

  class DropdownDividerEntry extends DropDownMenuEntry {
    DropdownDividerEntry() : super(
      value: null,
      label: '',
      style: MenuItemButton.styleFrom(
        padding: EdgeInsets.zero,
        minimumSize: const Size(double.infinity, 1),
        backgroundColor: Colors.grey.shade200,
      ),
    );
  }
  
  // 使用示例
  dropdownMenuEntries: [
    DropDownMenuEntry(value: 'a', label: '选项A'),
    DropdownDividerEntry(),
    DropDownMenuEntry(value: 'b', label: '选项B'),
  ]
  

注意：处理DropdownMenu的选择事件时，需要判断选中值是否为null（分割线的value），避免触发不必要的逻辑。

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