??????小菜嘗試做一個類似 BottomSheet 的滑動 Menu，不局限于底部，可以從屏幕四周滑出；因涉及內(nèi)容較多，小菜計劃拆分開來總結(jié)和完善，先介紹大體結(jié)構(gòu)，之后再詳細(xì)學(xué)習(xí)；

AnimatedBuilder

??????小菜需要 Menu 從屏幕四周滑動出來，此時一定需要 Animation 動畫，而對于動畫，小菜嘗試用 AnimatedBuilder 來處理，雖然需要設(shè)置 AnimatedController 等，但對于動畫的處理相對靈活；

1. AnimationController

??????首先需要設(shè)置一個 Animation 控制器，在指定的 Duration 時長內(nèi)，屏幕繪制過程中，會線性的生成 0.0-1.0 的數(shù)值用來控制動畫的開始與結(jié)束以及設(shè)置動畫的監(jiān)聽；通過 vsync 防止在屏幕外的 Animation 消耗不必要資源；

??????使用 AnimationController 時需要注意在 initState() 生命周期中進行初始化和在 dispose() 結(jié)束生命周期時進行銷毀；同時可以通過 addStatusListener() 對動畫過程進行監(jiān)聽；
??????a. AnimationStatus.forward 為動畫開始時的回調(diào)監(jiān)聽，與 AnimationController.forward() 對應(yīng)；
??????b. AnimationStatus.completed 為動畫執(zhí)行結(jié)束時的回調(diào)監(jiān)聽；
??????c. AnimationStatus.reverse 為動畫反向執(zhí)行時的回調(diào)監(jiān)聽，與 AnimationController.reverse() 對應(yīng)；
??????d. AnimationStatus.dismissed 為動畫反向執(zhí)行結(jié)束時的回調(diào)監(jiān)聽；

@override
void initState() {
  super.initState();
  _controller = AnimationController(
      duration: const Duration(milliseconds: 600), vsync: this);
  _controller.addStatusListener((status) {
    switch(status){
      case AnimationStatus.dismissed:
        print("Current status is dismissed !");
        break;
      case AnimationStatus.forward:
        print("Current status is forward !");
        break;
      case AnimationStatus.reverse:
        print("Current status is reverse !");
        break;
      case AnimationStatus.completed:
        print("Current status is completed !");
        break;
    }
  });
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

2. AnimatedBuilder

??????AnimationController 之后需要設(shè)置具體 Menu Widget 所在的 AnimatedBuilder 動畫構(gòu)造器；在其中設(shè)置平移動畫，并與 AnimationController 控制器進行關(guān)聯(lián)；具體的動畫相關(guān)的會在之后的博客中繼續(xù)詳細(xì)學(xué)習(xí)；

return AnimatedBuilder(
    animation: _controller,
    child: Container(
        color: Color(0xF3242424),
        height: 200.0,
        width: ScreenUtils.getScreenWidth()),
    builder: (BuildContext context, Widget child) {
      return Transform.translate(offset: Offset(0, _controller.value * 50), child: child);
    });

SingleChildLayoutDelegate

??????動畫的處理基本搞定，重要的是如何讓 Widget 從屏幕四周外部開始平移，此時小菜嘗試用 SingleChildLayoutDelegate 來處理；

??????SingleChildLayoutDelegate 是用于計算帶有單個子對象的渲染對象的布局的委托，其本身是一個抽象類，需要自己實現(xiàn)對應(yīng)的 Delegate 委托；小菜自定義一個 ACEMenuDelegate，主要實現(xiàn)兩個方法，分別為：確定要應(yīng)用于子項的約束的 getConstraintsForChild() 和確定子項位置的 getPositionForChild()；

??????當(dāng)提供對應(yīng)的實例時，應(yīng)調(diào)用 shouldRelayout()，判斷實例是否實際代表其他信息；具體的應(yīng)用小菜會在之后的博客中進一步學(xué)習(xí)；

class ACEMenuDelegate extends SingleChildLayoutDelegate {
  final MenuType _menuType;
  final double _controllerValue;

  ACEMenuDelegate(this._menuType, this._controllerValue);

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return BoxConstraints(
        minWidth: (_menuType == MenuType.MENU_LEFT ||
                _menuType == MenuType.MENU_RIGHT)
            ? 0
            : constraints.maxWidth,
        maxWidth: (_menuType == MenuType.MENU_LEFT ||
                _menuType == MenuType.MENU_RIGHT)
            ? ScreenUtils.getScreenWidth() * 0.75
            : constraints.maxWidth,
        minHeight: 0.0,
        maxHeight: (_menuType == MenuType.MENU_LEFT ||
                _menuType == MenuType.MENU_RIGHT)
            ? constraints.maxHeight
            : constraints.maxHeight * 0.45);
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    double _offsetX = Offset.zero.dx, _offsetY = Offset.zero.dy;
    switch (_menuType) {
      case MenuType.MENU_TOP:
        _offsetY = -childSize.height * (1 - _controllerValue);
        break;
      case MenuType.MENU_BOTTOM:
        _offsetY = size.height - childSize.height * _controllerValue;
        break;
      case MenuType.MENU_LEFT:
        _offsetX = -childSize.width * (1 - _controllerValue);
        break;
      case MenuType.MENU_RIGHT:
        _offsetX = size.width - childSize.width * _controllerValue;
        break;
    }
    return Offset(_offsetX, _offsetY);
  }

  @override
  bool shouldRelayout(ACEMenuDelegate oldDelegate) {
    return _controllerValue != oldDelegate._controllerValue;
  }
}

??????ACEPageMenu 源碼

??????小菜今天只是大概介紹一下功能實現(xiàn)，對于細(xì)節(jié)部分以及手勢操作正在進一步完善，對于動畫和委托的學(xué)習(xí)會在之后進一步學(xué)習(xí)；如有錯誤，請多多指導(dǎo)！

來源： 阿策小和尚