湖南网站建设网,网站建设考虑,网站建设评审,dw设计个人网页文章目录 1. 概念介绍2. 使用方法2.1 DropdownMenu2.1 DropdownMenuEntry 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何禁止页面跟随手机自动旋转相关的内容#xff0c;本章回中将介
绍DropdownMenu组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 … 文章目录 1. 概念介绍2. 使用方法2.1 DropdownMenu2.1 DropdownMenuEntry 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何禁止页面跟随手机自动旋转相关的内容本章回中将介
绍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. 示例代码 ListDropdownMenuEntryString list [const DropdownMenuEntryString(value:1, label: One),const DropdownMenuEntryString(value:2, label: Two),const DropdownMenuEntryString(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组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
