乐趣区

关于flutter:Flutter-实战菜单Menu功能

jiezi

老孟导读：明天介绍下 Flutter 中的 菜单性能。

PopupMenuButton

应用 PopupMenuButton，点击时弹出菜单，用法如下：

PopupMenuButton<String>(itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        child: Text('数学'),
      ),
      PopupMenuItem<String>(
        value: '英语',
        child: Text('英语'),
      ),
      PopupMenuItem<String>(
        value: '生物',
        child: Text('生物'),
      ),
      PopupMenuItem<String>(
        value: '化学',
        child: Text('化学'),
      ),
    ];
  },
)

成果如下：

设置其初始值：

PopupMenuButton<String>(
  initialValue: '语文',
  ...
)

设置初始值后，关上菜单后，设置的值将会高亮，成果如下：

获取用户抉择了某一项的值，或者用户未选中，代码如下：

PopupMenuButton<String>(onSelected: (value){print('$value');
  },
  onCanceled: (){print('onCanceled');
  },
  ...
)

tooltip是长按时弹出的提醒，用法如下：

PopupMenuButton<String>(
  tooltip: 'PopupMenuButton',
  ...
)

成果如下：

设置其暗影值、内边距和弹出菜单的背景色彩：

PopupMenuButton<String>(
  elevation: 5,
  padding: EdgeInsets.all(5),
  color: Colors.red,
  ...
)

默认状况下，PopupMenuButton 显示 3 个小圆点，咱们也能够对齐进行设置，设置文字如下：

PopupMenuButton<String>(child: Text('学科'),
  ...
)

child组件将会被 InkWell 包裹，点击弹出菜单，成果如下：

也能够设置其余图标：

PopupMenuButton<String>(icon: Icon(Icons.add),
    ...
)

成果如下：

设置弹出菜单边框：

PopupMenuButton<String>(
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.red),
    borderRadius: BorderRadius.circular(10)
  ),
    ...
)

成果如下：

menu 有一个十分重要的参数Offset，这个参数是管制菜单弹出的地位，通常状况下，菜单在以后按钮上面展现：

PopupMenuButton<String>(offset: Offset(0,100),
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        child: Text('数学'),
      ),
    ];
  },
)

PopupMenuButton的每一项都须要是 PopupMenuEntry 类型，PopupMenuEntry为抽象类，其子类有 PopupMenuItem、PopupMenuDivider、CheckedPopupMenuItem。

PopupMenuItem

构造函数为

参数阐明：

  • value：当此项选中后，此值将会通过 onSelected 返回。
  • enabled：此项是否可用。
  • height：此项的高度
  • textStyle：文本款式
  • child：子控件。

用法如下：

PopupMenuButton<String>(onSelected: (value) {print('$value');
  },
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',
        enabled: false,
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        textStyle: TextStyle(color: Colors.red),
        child: Text('数学'),
      ),
      PopupMenuItem<String>(
        value: '英语',
        height: 100,
        child: Text('英语'),
      ),
    ];
  },
)

PopupMenuDivider

PopupMenuDivider 是菜单分割线，用法如下：

PopupMenuButton<String>(onSelected: (value) {print('$value');
  },
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',
        child: Text('语文'),
      ),
      PopupMenuDivider(),
      PopupMenuItem<String>(
        value: '数学',
        child: Text('数学'),
      ),
    ];
  },
)

PopupMenuDivider 默认高度为 16，留神这个高度并不是分割线的高度，而是分割线控件的高度，设置为 50 代码：

PopupMenuDivider(height: 50,),

CheckedPopupMenuItem

CheckedPopupMenuItem 是后面带是否选中的控件，实质就是一个 ListTile，用法如下：

PopupMenuButton<String>(onSelected: (value) {print('$value');
  },
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      CheckedPopupMenuItem(
        value: '语文',
        checked: true,
        child: Text('语文'),
      ),
      CheckedPopupMenuItem(
        value: '数学',
        child: Text('数学'),
      ),
    ];
  },
)

showMenu

如果你看下 PopupMenuButton 的源码会发现，PopupMenuButton也是应用 showMenu 实现的，用法如下：

showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <PopupMenuEntry>[PopupMenuItem(child: Text('语文')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(child: Text('数学'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('英语')),
    ]);

position参数示意弹出的地位，成果如下：

属性和 PopupMenuButton 根本一样，但应用 showMenu 须要咱们指定地位，所以个别状况下，咱们不会间接应用showMenu，而是应用PopupMenuButton，免去了计算地位的过程。

看下 PopupMenuButton 是如何计算的，有助于帮忙咱们了解：

final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
    final RenderBox button = context.findRenderObject();
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();
    final RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(button.localToGlobal(widget.offset, ancestor: overlay),
        button.localToGlobal(button.size.bottomRight(Offset.zero), ancestor: overlay),
      ),
      Offset.zero & overlay.size,
    );
    final List<PopupMenuEntry<T>> items = widget.itemBuilder(context);

交换

老孟 Flutter 博客地址（330 个控件用法）：http://laomengit.com

欢送退出 Flutter 交换群（微信：laomengit）、关注公众号【老孟 Flutter】：
退出移动版