小菜继续完善自定义 ACEPageMenu 滑动菜单;主要处理基本的点击事件以及在测试过程中遇到的小问题;
10701.gif

Offstage & Opacity

      小菜在刚开始尝试过程中遇到一个问题,当只展示顶部和底部 Menu 时,Menu 中点击事件无法触发;分析之后发现,小菜是在层级 Stack 中存放四周 Menu,当时采用 Offstage 使两侧 Menu 不展示,但小菜忽略了一点,Offstage 虽然是视觉不可见,但其子 Widget 依旧存在,类似于 Androidandroid:visibility="invisible"

      之前小菜有总结过,采用 Offstage 可避免不展示的内容不进行绘制,调整之后便不会遮挡其他 Menu 的点击事件;

switch (menuType) {
  case MenuType.MENU_TOP:
    _menuWid = Offstage(
        offstage: _isShowTopMenu || _isShowMixMenu ? false : true,
        child: _topMenuWid());
    break;
  case MenuType.MENU_BOTTOM:
    _menuWid = Offstage(
        offstage: _isShowBottomMenu || _isShowMixMenu ? false : true,
        child: _bottomMenuWid());
    break;
  case MenuType.MENU_LEFT:
    _menuWid = Offstage(
        offstage: _isShowLeftMenu ? false : true, child: _leftMenuWid());
    break;
  case MenuType.MENU_RIGHT:
    _menuWid = Offstage(
        offstage: _isShowRightMenu ? false : true, child: _rightMenuWid());
    break;
}

typedef

      小菜在自定义滑动菜单时,会有很多类似的图标按钮,为了代码的简洁性,通过 typedef 提取公共的点击事件;

typedef void OnMenuItemClicked(MenuItemType menuItemType, var operateData);

return GestureDetector(
    child: Container(
        height: MenuManager.topMenuIconSize,
        width: MenuManager.topMenuIconSize,
        child: Center(child: Icon(icon, color: Colors.white))),
    onTap: () => menuItemClick(type, null));

      typedef 小菜通常用作提取公共方法,可当作希望指定特定功能匹配的功能签名;借助 typedef,既可以将变量分配给函数,也可以当作函数参数;

typedef void OnItemClicked(MenuItemType menuItemType, var operateData);

itemClick01(type, data) {
  print('---itemClick01---type=$type---data=$data---');
}

itemClick02(type, data) {
  print('---itemClick02---type=$type---data=$data---');
}

OnItemClicked itemClicked = itemClick01;
itemClicked(MenuItemType.MENU_CATALOG, 'Catalog!');
itemClicked = itemClick02;
itemClicked(MenuItemType.MENU_QZONE, 'QZone!');

10702.png

ListView 头部空白

      小菜在尝试左侧滑动菜单时,添加了一个 ListView 作为数据展示,但尝试过程发现 ListView 顶部会有一块空白区域,而小菜并未设置 Header 或内外边距;查阅资料发现,当 ListView 没有与 AppBar 共同使用时,MediaQuery 会默认设置一个 padding,通过 remove 去掉即可;

return MediaQuery.removePadding(
    removeTop: true,
    context: context,
    child: Container(
        child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 4.0, bottom: 4.0),
                  child: Row(children: <Widget>[
                    Expanded(child: Text('当前 item = 当前 item = 当前 item =${index + 1}', style: TextStyle(fontSize: 16))),
                    Padding(child: Icon(Icons.lock_open, size: 14), padding: EdgeInsets.only(left: 10))
                  ]));
            })));

10703.jpeg

RawGestureDetector

      小菜需要处理复杂的手势操作,包括滑动点击等,单纯的 GestureDetector 不足以完成,于是小菜尝试用 RawGestureDetector 来处理手势操作集合;

class RawGestureDetector extends StatefulWidget {
  const RawGestureDetector({
    Key key,
    this.child,
    this.gestures = const <Type, GestureRecognizerFactory>{},
    this.behavior,
    this.excludeFromSemantics = false,
    this.semantics,
  })
}

      RawGestureDetector 作为一个有状态的 StatefulWidget 小部件,主要是处理 gestures 来拦截各种手势操作;针对手势这部分,小菜会在今后的博客中详细学习,今天仅为实现基本的功能;

      小菜优先实现基本的点击事件,在拦截点击时,小菜通过 onUpdateonEnd 配合处理,当没有进行滑动,即手势点击的 Point 坐标未改变时,并且在 onEnd 方法中可拦截作为一次有效的点击操作;

RawGestureDetector(
  child: CustomPaint(painter: CommonLinePainter(context, 50.0)),
  gestures: <Type, GestureRecognizerFactory>{
    MenuGestureRecognizer:
        GestureRecognizerFactoryWithHandlers<MenuGestureRecognizer>(
            () => MenuGestureRecognizer(),
            (MenuGestureRecognizer gesture) {
      gesture.onDown = (detail) {
        print('---MenuGestureRecognizer.onDown---$detail');
      };
      gesture.onUpdate = (detail) {
        _isGestureSlide = true;
        print('---MenuGestureRecognizer.onUpdate---$detail---${detail.localPosition}');
      };
      gesture.onEnd = (detail) {
        if (!_isGestureSlide) {
          _menuState(_isMenuShow ? MenuType.MENU_CLOSE : MenuType.MENU_MIX);
          _isMenuShow = !_isMenuShow;
        }
        _isGestureSlide = false;
        print('---MenuGestureRecognizer.onEnd---$detail---${detail.primaryVelocity}---${detail.velocity}---${detail.velocity.pixelsPerSecond}');
      };
    })
  }))

      ACEPageMenu 案例源码


      小菜对自定义 ACEPageMenu 的功能还不够完善,会逐渐学习补充;如有错误,请多多指导!

来源: 阿策小和尚