小菜继续完善自定义 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 的功能还不够完善，会逐渐学习补充；如有错误，请多多指导！
来源： 阿策小和尚
评论