DropdownMenu菜单

最新推荐文章于 2025-05-09 16:40:29 发布

原创

最新推荐文章于 2025-05-09 16:40:29 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

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

1. 概念介绍

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

在这里插入图片描述

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

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

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

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

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