佳匠网站建设,wordpress nas,单机怎么做网站,网站技术培训班文章目录 1. 概念介绍2. 使用方法3. 示例代码 我们在上一章回中介绍了Sliver综合示例相关的内容#xff0c;本章回中将介绍PopupMenuButton组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章回中介绍的PopupMenuButton组件位于AppBar右侧#xf… 文章目录 1. 概念介绍2. 使用方法3. 示例代码 我们在上一章回中介绍了Sliver综合示例相关的内容本章回中将介绍PopupMenuButton组件.闲话休提让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章回中介绍的PopupMenuButton组件位于AppBar右侧通常显示三个圆点图标点击该图标时弹出的菜单就是PopupMenuButton点击菜单中的选项后菜 单自动关闭。如果有看官不理解的话可以查看下面的程序运行效果图。本章回中将详细介绍PopupMenuButton的使用方法。011popMenu.gif
2. 使用方法
和其它组件一样PopupMenuButton组件提供了相关的属性通过这些属性可以控制该组件下面是该组件中常用的属性
icon属性主要用来控制按钮的图标默认是三个白色的圆点color属性主要用来控制弹出菜单的背景颜色默认是白色shape属性主要用来控制菜单的形状默认是矩形onOpened属性该属性是方法类型菜单弹出时回调onCanceled属性该属性是方法类型菜单关闭时回调onSelected属性该属性是方法类型选择某个菜单项时回调该方法itemBuilder属性该属性用来存放菜单中的选项可以存放多个菜单选项 这些属性中我们重点介绍一下itemBuilder属性我们需要使用PopupMenuItem或者CheckedPopupMenuItem组件给它赋值。这两个组件中都包含两个常用属性child属性用来控制菜单选项的显示内容通常使用Text组件或者Icon组件给它赋值value属性用来控制菜单选项的值onSelected属性对应的方法中会把这个值传递给方法的参数 介绍完这些属性后我们将在后面的小节中通过示例代码来演示它们的具体用法。
3. 示例代码
actions: [///这个组件自带三个点的icon不需要单独添加可以通过icon属性修改PopupMenuButton(// icon: Icon(Icons.ac_unit),///弹出菜单的背景颜色不过会把icon的颜色也修改了// color: Colors.grey,///控制菜单的形状修改为圆角shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16),),///控制菜单弹出位置over就在appBar上under在AppBar下方,默认值是overposition:PopupMenuPosition.over,///控制菜单的偏移位置正值向右和下偏移负值向左和上偏移offset: const Offset(-16,0),///选择菜单的某个item后的回调方法这个value和item中的value属性一致如果item中///没有给value属性赋值那么该方法不会被回调onSelected: (value){ debugPrint(selected: $value);},///meun打开和关闭时的回调方法onOpened: () debugPrint(open),onCanceled: () {debugPrint(cancel);},///菜单的初始值与该值相等的item会被标记为选中状态initialValue: two,///创建菜单项itemBuilder: (context) {// return PopupMenuItemString[return [///建议指定value属性PopupMenuItemString(value: one,onTap: () debugPrint(tap one),child: const Text(1),),PopupMenuItemString(value:two,onTap: () debugPrint(tap two),child: const Text(2),),PopupMenuItemString(value:three,onTap: () debugPrint(tap three),child: const Text(3),),///另外一种菜单项目它可以被选择通过checked控制默认值为false,设置为true时显示对号const CheckedPopupMenuItemString(value: four,checked:true,child: Text(4),),];},),
],在上面的示例代码中我们添加了四个菜单项目前三个菜单项都相同最后一个菜单项带一个对号表示被选择。此外PopupMenuButton组件需要放到AppBar组件的actions属性中这个在代码中可以看到。
看官们与PopupMenuButton组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
