Flutter 23: 图解 PopupMenu 那些事儿-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

Flutter 23: 图解 PopupMenu 那些事儿

简介: 0 基础学习 Flutter,第二十三步:整理 PopupMenu 基本使用方式~

      小菜需要处理标题栏弹出对话框 PopupMenu 样式,Flutter 当然提供了一些处理方式,类似 PopupMenuEntry 等,小菜仅就最基础的使用方式进行初步的学习和整理。

PopupMenuItem 基本样式

      PopupMenuItem 为单个 item 的弹出样式,默认为 48px 高,可根据需求自行定义。item 中可以自定义需要的样式,包括文字图片等一系列样式。

@override
Widget build(BuildContext context) {
  return new Scaffold(
      appBar: AppBar(
        title: Text('PopMenuDemo'),
        actions: <Widget>[_NomalPopMenu()],
      ),
      body: Center(child: new Text(_bodyStr)));
}

Widget _NomalPopMenu() {
  return new PopupMenuButton<String>(
      itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
            new PopupMenuItem<String>(
                value: 'value01', child: new Text('Item One')),
            new PopupMenuItem<String>(
                value: 'value02', child: new Text('Item Two')),
            new PopupMenuItem<String>(
                value: 'value03', child: new Text('Item Three')),
            new PopupMenuItem<String>(
                value: 'value04', child: new Text('I am Item Four'))
          ],
      onSelected: (String value) {
        setState(() { _bodyStr = value; });
      });
}

      Tips: 若需要处理带图标的样式时,官网提供的 Demo 是借助的 ListTile 来处理的,但是小菜测试发现图标与文字距离偏大,原因在于 ListTile 默认左侧图标 leading 距离不可直接调整,建议用 Row 或其他方式调整。

// ListTile 样式
new PopupMenuItem<String>(
    value: 'value01',
    child: ListTile( leading: Icon(Icons.looks_one), title: Text('Item One'))),

// 普通自定义样式
new PopupMenuItem<String>(
    value: 'value01',
    child: Row(children: <Widget>[
      Padding( padding: EdgeInsets.fromLTRB(0.0, 0.0, 8.0, 0.0),
          child: Icon(Icons.looks_one)),
      Text('Item One')
    ])),

CheckedPopupMenuItem 选中样式

      CheckedPopupMenuItem 是一个带有复选标记的弹出菜单项。默认高度同样是 48px,水平布局使用 ListTile 复选标记是 Icons.done 图标,显示在 leading 位置;同时只有在状态为选中时才会显示图标。

Widget _CheckPopMenu() {
  return new PopupMenuButton<String>(
      itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
            new CheckedPopupMenuItem<String>(
                checked: false, value: 'value01', child: new Text('Item One')),
            new CheckedPopupMenuItem<String>(
                checked: true, value: 'value02', child: new Text('Item Two')),
            new CheckedPopupMenuItem<String>(
                checked: false, value: 'value03', child: new Text('Item Three')),
            new CheckedPopupMenuItem<String>(
                checked: false, value: 'value04', child: new Text('I am Item Four'))
          ],
      onSelected: (String value) {
        setState(() { _bodyStr = value; });
      });
}

PopupMenuDivider 分割线

      PopupMenuDivider 是一条水平分割线,注意数组要使用父类 PopupMenuEntry,配合其他 item 样式共同使用。PopupMenuDivider 可以调整高度,但无法调整颜色,有需要的话可以进行自定义。

Widget _DividerPopMenu() {
  return new PopupMenuButton<String>(
      itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
            new PopupMenuItem<String>( value: 'value01', child: new Text('Item One')),
            new PopupMenuDivider(height: 1.0),
            new PopupMenuItem<String>( value: 'value02', child: new Text('Item Two')),
            new PopupMenuDivider(height: 1.0),
            new PopupMenuItem<String>( value: 'value03', child: new Text('Item Three')),
            new PopupMenuDivider(height: 1.0),
            new PopupMenuItem<String>( value: 'value04', child: new Text('I am Item Four'))
          ],
      onSelected: (String value) {
        setState(() { _bodyStr = value; });
      });
}

showMenu 指定位置

      PopupMenu 默认的弹框位置都是在右上角,且会挡住标题栏,如果有需要在其他位置弹框就需要借助 showMenu,主要通过 position 属性定位弹框位置。

      menu 的宽高与内容相关,小菜的理解是在水平和竖直方向上会将设置的 position 位置加上 menu 宽高,再与屏幕匹配,超过屏幕宽高,根据 position 按照 LTRB 顺序贴近屏幕边框展示。

onTap: () async {
  final result = await showMenu(
    context: context,
    position: RelativeRect.fromLTRB(100.0, 200.0, 100.0, 100.0),
//    position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 10.0),
    items: <PopupMenuItem<String>>[
      new PopupMenuItem<String>( value: 'value01', child: new Text('Item One')),
      new PopupMenuItem<String>( value: 'value02', child: new Text('Item Two')),
      new PopupMenuItem<String>( value: 'value03', child: new Text('Item Three')),
      new PopupMenuItem<String>( value: 'value04', child: new Text('I am Item Four'))
    ] );
},

      Tips: 如果 item 个数过多也无需担心,Flutter 支持默认超过屏幕滑动效果。


      小菜目前的学习还仅限于基本的使用,稍高级的自定义涉及较少,如果又不对的地方还希望多多指出!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章