Flutter DropdownButton 枚举 - Dart

在 Flutter 中，DropdownButton 是一个 Material Design 风格的下拉菜单，可以用于从多个选项中选择一个。DropdownButton 可以接受一个枚举类型的值作为选项，本文将介绍如何使用枚举类型的值来填充 DropdownButton。

枚举类型

枚举类型是一种固定数量的值的集合类型。在 Dart 中，枚举类型定义可以像下面这样：

enum Flavor {
  VANILLA,
  CHOCOLATE,
  STRAWBERRY,
  BANANA,
}

这个定义创建了一个 Flavor 枚举类型，它包含了 4 个选项：VANILLA、CHOCOLATE、STRAWBERRY 和 BANANA。

DropdownButton 构造函数

DropdownButton 的构造函数定义如下：

DropdownButton<T>({
  Key? key,
  required List<DropdownMenuItem<T>> items,
  T? value,
  Widget? icon,
  Widget? hint,
  void Function(T?)? onChanged,
  String? selectedItemBuilder,
  bool isDense = false,
  bool isExpanded = false,
})

items 参数可以接受一个 DropdownMenuItem 的列表作为选项。DropdownMenuItem 的定义如下：

DropdownMenuItem<T>({
  Key? key,
  T? value,
  Widget? child,
})

value 参数是 DropdownButton 的当前选中的值。onChanged 参数是当下拉菜单中的值发生变化时的回调函数。

使用枚举类型填充 DropdownButton

enum Flavor {
  VANILLA,
  CHOCOLATE,
  STRAWBERRY,
  BANANA,
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Flavor? _selectedFlavor;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropdownButton with Enum'),
      ),
      body: Center(
        child: DropdownButton<Flavor>(
          hint: Text('Select Flavor'),
          value: _selectedFlavor,
          onChanged: (Flavor? value) {
            setState(() {
              _selectedFlavor = value;
            });
          },
          items: Flavor.values
              .map<DropdownMenuItem<Flavor>>((Flavor value) {
            return DropdownMenuItem<Flavor>(
              value: value,
              child: Text(value.toString().split('.').last),
            );
          }).toList(),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个 MyHomePage 组件，使用一个 Flavor 类型的 _selectedFlavor 变量来维护当前选中的值。在 build 方法中，我们使用 DropdownButton 来渲染下拉菜单。items 参数使用了 Flavor 的 values 属性来填充选项。onChanged 回调函数会在下拉菜单中的值变化时被调用。最后，我们将 DropdownButton 放在了 Center 组件中，使得它在屏幕中间显示。