第二百七十七回

我们在上一章回中介绍了"DropdownMenu组件"相关的内容，本章回中将介绍DropdownButton组件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的DropdownButton组件和上一章回中介绍的DropdownMenu组件类似，主要用来实现下拉菜单，不过该组件在外观上像一个带图标的按钮，
点击按钮后会弹出下拉菜单，下面是该组件的外观效果图。本章回中将详细介绍该组件的使用方法。033

2. 使用方法

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

2.1 DropdownButton

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

• value属性：主要用来控制按钮上显示的内容，该内容也是下拉菜单中被选择的内容；
• dropdownColor属性：主要用来控制下拉菜单的背景颜色；
• style属性：主要用来控制下拉菜单中文字的颜色，value属性中的颜色也受该属性控制；
• icon属性：主要用来控制按钮上显示的图标；
• iconSize属性：主要用来控制按钮上图标的大小；
• items属性：主要用来控制下拉菜单中的内容，它是一个List,可以存放多个内容；
• onChanged属性：主要用来响应按钮的点击事件，它是方法类型，点击按钮时回调此属性对应的方法；
  上面介绍的这些属性中几乎都会用到，此外该组件还提供了其它的属性，大家可以参考官方文档的介绍；我们重点介绍一下items属性，它的类型是DropdownMenuItem，
  而且是List类型，也就是说它可以存放多个菜单项。此外，style属性是TextStyle类型，开始我以为该属性可以控制按钮的外观风格，使用后才发现它只能控制按钮
  上显示文字的风格。那么如何修改按钮的外观风格？没有办法修改，至少我没有找到修改的方法，这也算是该组件的缺点吧。

2.2 DropdownMenuItem

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

• vlaue属性：类似map中的key，它不会显示在菜单中，主要用来识别某个菜单项；
• child属性：主要用来控制菜单项中显示的内容，可以是文本或者图片；
  该组件还提供了其它的属性，主要用来修改菜单项的风格，比较颜色等。我们在这里就不详细介绍了，我重点说一下value属性，它和DropdownButton中的value属性
  相同，这两个value属性的值必须保持一致。该属性还会出现在onChanged属性对应的方法参数中，我们可以从参数中获取到当前被选择的菜单项的value。

3. 示例代码

List<DropdownMenuItem<String>> itemList = [
  ///value和onChanged中的value一致，child是菜单项中显示的内容
  const DropdownMenuItem(value: "one",child:Text("niceDay"), ),
  const DropdownMenuItem(value: "two",child: Text("today"),),
  const DropdownMenuItem(value: "three",child: Text("yesterday"),),
];

String itemSelectedValue = "two";

DropdownButton(
  ///这个显示的是被选择菜单项的值，它的类型与DropdownMenuItem中的泛型一致
  value: itemSelectedValue,
  ///下拉菜单的背景颜色
  dropdownColor: Colors.yellow,
  ///下拉菜单中文字的颜色
  style: const TextStyle(color: Colors.blue),
  iconSize: 32,
  icon: const Icon(Icons.schedule),
  items: itemList,
  onChanged: (value){
    debugPrint("it is : $value");
    setState(() {
      itemSelectedValue = value.toString();
    });
  },
),

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

4. 内容总结

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

• 下拉菜单按钮通过DropdownButton和DropdownMenuItem组件一起实现；
• DropdownButton组件主要控制按钮显示的内容和响应点击按钮事件；
• DropdownMenuItem组件主要控制菜单项的内容和风格；
• DropdownButton和DropdownMenuItem组件都提供了相关的属性来控制下拉菜单；

5. 经验分享

我们通过四种不同的组件实现了下拉菜单功能，我感觉使用DropdownMenu组件的场景更加多一些，因为它的外观是一个输入框，在输入框中显示被选择菜单的内容，而
使用DropdownButton的场景比较少，它的外观是一个带图标的按钮，菜单中被选择的内容显示在按钮上，和普通的按钮十分相似，但是不能修改按钮的外观。大家可以
结合自己项目的需求选择不同的组件来实现下拉菜单功能。
看官们，与"DropdownButton组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!