DropdownMenu组件的用法

我们在上一章回中介绍了"如何禁止页面跟随手机自动旋转"相关的内容，本章回中将介绍DropdownMenu组件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的DropdownMenu组件就是常用的下拉菜单，它表面上看只显示一个内容，但是点击菜单上的倒三角后会弹出一个菜单，菜单中包含多个菜单项供选
择。本章回中将详细介绍该组件的使用方法。

2. 使用方法

下拉菜单通过DropdownMenu组件和DropdownMenuEntry组件一起配合实现，DropdownMenu组件主要控制菜单的外观和响应点击事件，DropdownMenuEntry组件
主要控制菜单中显示的内容。接下来我们分别介绍这两种组件的用法。

2.1 DropdownMenu

该组件提供了相关的属性来控制下拉菜单的外观和功能，下面是常用的属性：

• width属性：主要用来控制下拉菜单的宽度；
• menuHeight属性：主要用来控制下拉菜单的高度；
• dropdownMenuEntries属性：主要用来控制下拉菜单中显示的内容;
• leadingIcon属性：主要用来显示在内容前面的图标;
• trailingIcon属性：主要用来显示在下拉菜单右侧的图标，默认显示实心的倒三角;
• label属性：表示下拉时菜单中没有选择内容时默认显示的内容；
• onSelected属性：该属性得方法类型，用来响应下拉菜单的点击事件；
  上面介绍的这些属性中几乎都会用到，此外该组件还提供了其它的属性，大家可以参考官方文档的介绍；此外，我们重点介绍一下dropdownMenuEntries属性，它的类
  型是DropdownMenuEntry，而且是List类型，也就是说它可以存放多个菜单项。

2.1 DropdownMenuEntry

该组件提供了相关的属性来控制菜单项的相关内容与风格，下面是常用的属性：

• value属性：表示菜单项的值，它不会出现在菜单中；
• label属性：表示菜单项的内容，它会显示在菜单项中；
• leadingIcon属性：用来控制label前面的图标；
• trailingIcon属性：用来控制label后面的图标；
• style属性：用来控制菜单项的风格；
  上面介绍的这些属性中前两个属性是必选属性，其它属性主要用来控制菜单项的风格，都是可选属性。

3. 示例代码

  List<DropdownMenuEntry<String>> list = [
    const DropdownMenuEntry<String>(value:"1", label: "One"),
    const DropdownMenuEntry<String>(value:"2", label: "Two"),
    const DropdownMenuEntry<String>(value:"3", label: "Three"),
  ];

  String selectedValue = "default";

DropdownMenu(
  width: 300,
  menuHeight: 400,
  ///下拉菜单中显示的内容
  dropdownMenuEntries: list,
  ///在显示内容前面的图标
  leadingIcon: const Icon(Icons.numbers),
  ///没有下拉时菜单中显示的内容
  label: Text(selectedValue),
  ///菜单右侧显示的图标，默认是一个实心的倒三角
  trailingIcon: const Icon(Icons.arrow_downward),
  ///下拉菜单时回调该方法
  onSelected: (value) {
    setState(() {
      selectedValue = value.toString();
    });
  },
),

上面的示例代码演示了DropdownMenu和DropdownMenuEntry组件的用法，我们创建了一个包含三个菜单项的下拉菜单，点击菜单右侧的图标就会弹出菜单项供我们
选择，选择某个菜单项目后菜单消失，同时把被选择的菜单项显示在菜单上面。下面是该程序的运行效果图。032

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 下拉菜单通过DropdownMenu和DropdownMenuEntry组件一起实现；
• DropdownMenu组件主要控制下拉菜单的外观和响应点击事件；
• DropdownMenuEntry组件主要控制菜单项的内容和风格；
• DropdownMenu和DropdownMenuEntry组件都提供了相关的属性来控制下拉菜单；
  看官们，与"DropdownMenu组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!