我们在上一章回中介绍了"如何禁止页面跟随手机自动旋转"相关的内容,本章回中将介 绍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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!