Side dishes continue to improve customizationACEPageMenuSliding menu; Dealing with basic click events and minor problems encountered during testing;

Offstage & Opacity

Xiao CAI encountered a problem at the beginning of the trial. When only the top and bottom menus were displayed, the clicking event in Menu could not be triggered. After analysis, it was found that the side Menu was stored in the Stack, and Offstage was used to make the Menu on both sides not displayed. However, the side Menu was ignored. Although Offstage was invisible, its sub-widgets still existed. Android :visibility=”invisible”;

As summarized in the previous dishes, Offstage can avoid not drawing the contents that are not displayed. After adjustment, other Menu click events will not be blocked.

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;
}
Copy the code

typedef

There are many similar ICONS for custom sliding menus. For simplicity of code, use typedef to extract common click events.

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));
Copy the code

Typedefs are often used to extract common methods and can be used as functional signatures that you want to specify a specific function match; With typedefs, you can assign variables to functions or as function parameters;

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! ');Copy the code

The ListView header is blank

When the side dish tried the left sliding menu, it added a ListView as a data display, but during the trial process, it found a blank area at the top of the ListView, and the side dish did not set Header or inside and outside margins. When the ListView is not used with the AppBar, the MediaQuery defaults to a padding, which can be removed by remove.

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

RawGestureDetector

Xiao CAI needs to deal with complex gesture operations, including sliding and clicking, etc. The simple GestureDetector is not enough to complete, so Xiao CAI tries to use RawGestureDetector to deal with the set of gesture operations.

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

As a StatefulWidget, RawGestureDetector mainly deals with gestures to intercept gestures. For gesture part, xiao CAI will study in detail in the future blog, today only to achieve the basic function;

The minor dish realizes the basic click event first. When blocking the click, the minor dish is processed with onUpdate and onEnd. When there is no sliding, that is, the Point coordinate of gesture click is not changed, and can be intercepted as an effective click operation in onEnd method.

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.pix elsPerSecond}'); }; }})))Copy the code

ACEPageMenu case source code

Xiao CAI is not perfect for the function of custom ACEPageMenu, and will gradually learn and supplement; If there are mistakes, please give more guidance!

Source: Little Monk A Ce