Flutter 学习 - Widget 之 菜单按钮
程序员文章站
2022-05-30 13:25:23
...
前言
铛 ,铛 ,铛,终于又要更新了,最近工作事情比较多,很久没有进行Flutter章节的进度更新,今天我们来看下Flutter中菜单按钮的使用方法,这个按钮的名字叫做PopupMenuButton,老规矩,先看下效果
正文
PopupMenuButton其实就是一个按钮,在点击按钮的时候可以弹出类似于Android的选项菜单的框
- 使用方式
PopupMenuButton<String>(
initialValue: "",
child: Text(
"点击这里展示menu",
textAlign: TextAlign.center,
style: TextStyle(
backgroundColor: Colors.blue,
fontSize: 36,
fontStyle: FontStyle.italic
),
),
onSelected: (String string){
print(string.toString());
},
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
PopupMenuItem(
child: Text("全部"),
value: "全部",
),PopupMenuItem(
child: Text("恋爱"),
value: "恋爱",
),PopupMenuItem(
child: Text("修真"),
value: "修真",
),PopupMenuItem(
child: Text("免费"),
value: "免费",
)
]
)
这里使用其实很简单,其中child参数是用来显示按钮的内容,itemBuilder参数是用来显示弹出的菜单,onSelected参数用来处理点击之后的点击事件,会返回我们选中的选项,initialValue参数用来初始化我们的选项,当设置的时候会突出显示,下面来看下我们给initialValue设置值
我们设置的初始值为“恋爱”,效果为
我们可以看到这时候恋爱就显示为被选中状态,并且处于与我们的文字按钮对齐状态
###源码分析
注:参数除了itemBuilder为必传参数,其他都是可选状态
const PopupMenuButton({
Key key,
@required this.itemBuilder,//必选,要显示的菜单 ,类型是PopupMenuItemBuilder
this.initialValue,//初始化的菜单项,如果有,在菜单打开时会突出显示。类型为T,看你的菜单定义的是什么类型
this.onSelected,//当用户从此按钮创建的弹出菜单中选择一个值时调用,类型 PopupMenuItemSelected
this.onCanceled,//当用户在不选择项目的情况下关闭弹出菜单时调用。类型 PopupMenuItemSelected
this.tooltip,//类型是String ,当长按时显示的文本,用于盲人辅助模式下
this.elevation = 8.0,//类型是double,Button 相对于其父级放置的z坐标,这可以控制 menu 下的阴影大小,默认值为8.0,该值必须>=0
this.padding = const EdgeInsets.all(8.0),//menu 的内边距 类型是EdgeInsetsGeometry
this.child,//这个按钮里显示的内容,类型是Widget
this.icon,//这个按钮里显示的 Icon Widget,前面在 图片框和Icon 一节讲过如何使用 Icon Widget ,类型是Icon
this.offset = Offset.zero,//menu 相对按钮的偏移量,类型是Offset
this.enabled = true,//按钮是否可用,false的话 按钮点击没效果
}) : assert(itemBuilder != null),
assert(offset != null),
assert(enabled != null),
assert(!(child != null && icon != null)), // fails if passed both parameters
super(key: key);
以下是我的Flutter系列的链接,后续会持续更新,欢迎大家指正。
Flutter 系列文章
- Flutter 学习 - 开篇
- Flutter 学习 - 基础框架
- Flutter 学习 - 网络请求和数据解析
- Flutter 学习 - Widget 之 Text
- Flutter 学习 - Widget 之 RichText
- Flutter 学习 - Widget 之 Image和Icon
- Flutter 学习 - Widget 之 TextField
- Flutter 学习 - Widget 之 对话框
- Flutter 学习 - Widget 之 菜单按钮
- Flutter 学习 - Widget 之 布局 Widget
- Flutter 学习 - 容器类Widget
- Flutter 学习 - 可滚动的 Widget
- Flutter 学习 - 功能类Widget
更多关于技术相关的内容请关注博主公众号–迷途程序猿
推荐阅读
-
Flutter学习笔记(22)--单个子元素的布局Widget
-
Bootstrap CSS组件之按钮下拉菜单
-
Flutter学习之构建、布局及绘制三部曲
-
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
-
Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)
-
Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序
-
Flutter学习笔记(9)--组件Widget
-
Extjs学习笔记之四 工具栏和菜单
-
php学习笔记之动态生成一组单选按钮
-
Flutter学习笔记(11)--文本组件、图标及按钮组件