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 的功能還不夠完善，會逐漸學習補充；如有錯誤，請多多指導！

來源： 阿策小和尚