第一百八十六回 DropdownMenu组件

news2025/1/20 19:16:40

文章目录

1. 概念介绍
2. 使用方法
- 2.1 DropdownMenu
- 2.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. 示例代码

  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();
    });
  },
),