我们在上一章回中介绍了"DropdownMenu组件"相关的内容,本章回中将介绍DropdownButton组件.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的DropdownButton组件和上一章回中介绍的DropdownMenu组件类似,主要用来实现下拉菜单,不过该组件在外观上像一个带图标的按钮,
点击按钮后会弹出下拉菜单,下面是该组件的外观效果图。本章回中将详细介绍该组件的使用方法。
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组件的用法,我们创建了一个包含三个菜单项的下拉菜单按钮,点击按钮上的图标就会弹出菜单项供我
们选择,选择某个菜单项目后菜单消失,同时把被选择的菜单项显示在按钮上面。下面是该程序的运行效果图。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- 下拉菜单按钮通过DropdownButton和DropdownMenuItem组件一起实现;
- DropdownButton组件主要控制按钮显示的内容和响应点击按钮事件;
- DropdownMenuItem组件主要控制菜单项的内容和风格;
- DropdownButton和DropdownMenuItem组件都提供了相关的属性来控制下拉菜单;
5. 经验分享
我们通过四种不同的组件实现了下拉菜单功能,我感觉使用DropdownMenu组件的场景更加多一些,因为它的外观是一个输入框,在输入框中显示被选择菜单的内容,而
使用DropdownButton的场景比较少,它的外观是一个带图标的按钮,菜单中被选择的内容显示在按钮上,和普通的按钮十分相似,但是不能修改按钮的外观。大家可以
结合自己项目的需求选择不同的组件来实现下拉菜单功能。
看官们,与"DropdownButton组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!