欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter 学习 - Widget 之 菜单按钮

程序员文章站 2022-05-30 13:25:23
...

前言

铛 ,铛 ,铛,终于又要更新了,最近工作事情比较多,很久没有进行Flutter章节的进度更新,今天我们来看下Flutter中菜单按钮的使用方法,这个按钮的名字叫做PopupMenuButton,老规矩,先看下效果

Flutter 学习 - Widget 之 菜单按钮

正文

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设置值
Flutter 学习 - Widget 之 菜单按钮
我们设置的初始值为“恋爱”,效果为
Flutter 学习 - Widget 之 菜单按钮
我们可以看到这时候恋爱就显示为被选中状态,并且处于与我们的文字按钮对齐状态
###源码分析
注:参数除了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 学习 - Widget 之 菜单按钮

相关标签: Flutter 学习