文章目录
我们在上一章回中介绍了"如何禁止页面跟随手机自动旋转"相关的内容，本章回中将介绍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组件的用法，我们创建了一个包含三个菜单项的下拉菜单，点击菜单右侧的图标就会弹出菜单项供我们
选择，选择某个菜单项目后菜单消失，同时把被选择的菜单项显示在菜单上面。下面是该程序的运行效果图。
4. 内容总结
最后，我们对本章回的内容做一个全面的总结：
- 下拉菜单通过DropdownMenu和DropdownMenuEntry组件一起实现；
- DropdownMenu组件主要控制下拉菜单的外观和响应点击事件；
- DropdownMenuEntry组件主要控制菜单项的内容和风格；
- DropdownMenu和DropdownMenuEntry组件都提供了相关的属性来控制下拉菜单；
看官们，与"DropdownMenu组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!