Flutter 学习 - Widget 之 菜单按钮

前言

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

演示2.gif

正文

PopupMenuButton其实就是一个按钮，在点击按钮的时候可以弹出类似于Android的选项菜单的框

• 使用方式

PopupMenuButton(
            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(
                     child: Text("全部"),
                     value: "全部",
                 ),PopupMenuItem(
                     child: Text("恋爱"),
                     value: "恋爱",
                 ),PopupMenuItem(
                     child: Text("修真"),
                     value: "修真",
                 ),PopupMenuItem(
                     child: Text("免费"),
                     value: "免费",
                 )
            ]
      )

这里使用其实很简单，其中child参数是用来显示按钮的内容，itemBuilder参数是用来显示弹出的菜单，onSelected参数用来处理点击之后的点击事件，会返回我们选中的选项，initialValue参数用来初始化我们的选项，当设置的时候会突出显示，下面来看下我们给initialValue设置值

WX20190905-151051.png

我们设置的初始值为“恋爱”，效果为

演示3.gif

我们可以看到这时候恋爱就显示为被选中状态，并且处于与我们的文字按钮对齐状态

源码分析

注：参数除了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

更多关于技术相关的内容请关注博主公众号--迷途程序猿

迷途程序猿