Flutter 107: 图解自定义 ACEPageMenu 滑

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

Offstage & Opacity

      小菜在刚开始尝试过程中遇到一个问题，当只展示顶部和底部 Menu 时，Menu 中点击事件无法触发；分析之后发现，小菜是在层级 Stack 中存放四周 Menu，当时采用 Offstage 使两侧 Menu 不展示，但小菜忽略了一点，Offstage 虽然是视觉不可见，但其子 Widget 依旧存在，类似于 Android 的 android: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!');

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))
                  ]));
            })));

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 来拦截各种手势操作；针对手势这部分，小菜会在今后的博客中详细学习，今天仅为实现基本的功能；

      小菜优先实现基本的点击事件，在拦截点击时，小菜通过 onUpdate 和 onEnd 配合处理，当没有进行滑动，即手势点击的 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 的功能还不够完善，会逐渐学习补充；如有错误，请多多指导！

来源： 阿策小和尚