Flutter 知识集锦 | Dart 枚举已支持属性成员

在 Flutter3.0 之后，Dart 版本到 2.17 。尽管知道 Dart 枚举已支撑特点成员，但一向没有用过。最近刚好有个运用的小场景，就来介绍一下。将以如下的 PopupMenuButton 的按钮数据来介绍：

本文视频版:

也能够在 bilibili 观看： www.bilibili.com/video/BV1AN…

1. 枚举对成员的支撑

在以前，枚举的特性比较贫弱，只能界说一个个元素。 如下所示，界说一个 MenuAction 用于表明菜单的类型：

enum MenuAction {
  setting,
  about,
  help,
}

假如想要依据枚举元素，得到对应的介绍文字就比较麻烦，需求保护一组元素和字符串的映射联系。所以当枚举能够支撑成员特点，就非常友爱。代码如下：

enum MenuAction {
  setting(label: '运用设置'),
  about(label: '关于运用'),
  help(label: '协助中心');
  final String label;
  const MenuAction({
    required this.label,
  });
}

这儿需求注意三个小细节:

[1]. 枚举区代码必定要在成员和结构之上。
[2]. 最后一个枚举元素以 ; 结束，其余的枚举元素以 ,结束。
[2]. 枚举的结构函数 必定要是 const 结构。

2. PopupMenuButton 的运用

PopupMenuButton 能够支撑一个泛型，这儿设置为 MenuAction。这样构建的 PopupMenuEntry 泛型也将是 MenuAction，其中条目的文字就能够经过 action.label 获取，非常方便：

class MorePopIcon extends StatelessWidget {
  const MorePopIcon({super.key});
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<MenuAction>(
      itemBuilder: _buildItem,
      onSelected: _onTapItem,
      icon: const Icon(Icons.more_vert_outlined),
      position: PopupMenuPosition.under,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
    );
  }
  List<PopupMenuEntry<MenuAction>> _buildItem(BuildContext context) {
    return MenuAction.values
        .map((MenuAction action) => PopupMenuItem<MenuAction>(
              height: 35,
              value: action,
              child: Center(child: Text(action.label)),
            ))
        .toList();
  }
}

在点击条目触发的回调中，能够得到对应的 MenuAction 枚举元素，经过 switch 关键字就能够很轻松地进行处理：

void _onTapItem(MenuAction value) {
  switch(value){
    case MenuAction.setting:
      break;
    case MenuAction.about:
      showConformDialog();
      break;
    case MenuAction.help:
      break;
  }
}

3. 支撑图标

现在想要为菜单栏增加图标，能够为 MenuAction 增加成员来完成。代码如下：

enum MenuAction {
  setting(label: '运用设置',iconData: Icons.settings),
  about(label: '关于运用',iconData: Icons.info),
  help(label: '协助中心',iconData: Icons.help);
  final String label;
  final IconData iconData;
  const MenuAction({
    required this.label,
    required this.iconData,
  });
}

构建条目组件时，运用 MenuAction 目标中的 iconData 即可：

4. 枚举支撑完成和界说办法

最后，枚举中能够提供办法，包含运算符重载；也支撑 implements 关键字完成一个接口。如下所示，MenuAction 完成 Comparable 接口，并完成 compareTo 办法，拥有比较的才能。然后重写了 > 运算符，支撑两个元素之间的比较。

void main() {
  bool b = MenuAction.help > MenuAction.about;
  print(b);
}
enum MenuAction implements Comparable<MenuAction> {
  setting(label: '运用设置', iconData: Icons.settings),
  about(label: '关于运用', iconData: Icons.info),
  help(label: '协助中心', iconData: Icons.help);
  final String label;
  final IconData iconData;
  const MenuAction({
    required this.label,
    required this.iconData,
  });
  @override
  int compareTo(MenuAction other) => label.compareTo(other.label);
  bool operator >(MenuAction other) {
    return compareTo(other) > 0;
  }
}

总的来说，Dart 枚举支撑成员特点和办法的特性是一个很快捷的特性，能让代码更简练。那么本文接到这了，谢谢观看~