和尚继续完善自定义 ACEPageMenu 滑动菜单；主要处理基本的点击事件以及在测试过程中遇到的小问题；
Offstage & Opacity
和尚在刚开始尝试过程中遇到一个问题，当只展示顶部和底部 Menu 时，Menu 中点击事件无法触发；分析之后发现，和尚是在层级 Stack 中存放四周 Menu，当时采用 Offstage 使两侧 Menu 不展示，但和尚忽略了一点，Offstage 虽然是视觉不可见，但其子 Widget 依旧存在，类似于 Android 的 android:visibility="invisible"；
之前和尚有总结过，采用 Offstage 可避免不展示的内容不绘制，调整之后便不会遮挡其他 Menu 的点击事件；
代码语言：javascript复制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 提取公共的点击事件；
代码语言：javascript复制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，既可以将变量分配给函数，也可以当作函数参数；
代码语言：javascript复制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 去掉即可；
代码语言：javascript复制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 来处理手势操作集合；
代码语言：javascript复制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 方法中可拦截作为一次有效的点击操作；
代码语言：javascript复制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 的功能还不够完善，会逐渐学习补充；如有错误，请多多指导！
来源：阿策小和尚
