和尚嘗試作一個相似 BottomSheet 的滑動 Menu，不侷限於底部，能夠從屏幕四周滑出；因涉及內容較多，和尚計劃拆分開來總結和完善，先介紹大致結構，以後再詳細學習；web
和尚自定義的 ACEPageMenu 滑動菜單在繪製及動畫主要涉及兩方面，和尚簡單介紹；微信
AnimatedBuilder
和尚須要 Menu 從屏幕四周滑動出來，此時必定須要 Animation 動畫，而對於動畫，和尚嘗試用 AnimatedBuilder 來處理，雖然須要設置 AnimatedController 等，但對於動畫的處理相對靈活；ide
1. AnimationController
首先須要設置一個 Animation 控制器，在指定的 Duration 時長內，屏幕繪製過程當中，會線性的生成 0.0-1.0 的數值用來控制動畫的開始與結束以及設置動畫的監聽；經過 vsync 防止在屏幕外的 Animation 消耗沒必要要資源；佈局
使用 AnimationController 時須要注意在 initState() 生命週期中進行初始化和在 dispose() 結束生命週期時進行銷燬；同時能夠經過 addStatusListener() 對動畫過程進行監聽；學習
a. AnimationStatus.forward 爲動畫開始時的回調監聽，與 AnimationController.forward() 對應；動畫
b. AnimationStatus.completed 爲動畫執行結束時的回調監聽；ui
c. AnimationStatus.reverse 爲動畫反向執行時的回調監聽，與 AnimationController.reverse() 對應；this
d. AnimationStatus.dismissed 爲動畫反向執行結束時的回調監聽；spa
@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 以後須要設置具體 Menu Widget 所在的 AnimatedBuilder 動畫構造器；在其中設置平移動畫，並與 AnimationController 控制器進行關聯；具體的動畫相關的會在以後的博客中繼續詳細學習；.net
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 是用於計算帶有單個子對象的渲染對象的佈局的委託，其自己是一個抽象類，須要本身實現對應的 Delegate 委託；和尚自定義一個 ACEMenuDelegate，主要實現兩個方法，分別爲：肯定要應用於子項的約束的 getConstraintsForChild() 和肯定子項位置的 getPositionForChild()；
當提供對應的實例時，應調用 shouldRelayout()，判斷實例是否實際表明其餘信息；具體的應用和尚會在以後的博客中進一步學習；
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 源碼
和尚今天只是大概介紹一下功能實現，對於細節部分以及手勢操做正在進一步完善，對於動畫和委託的學習會在以後進一步學習；若有錯誤，請多多指導！
來源：阿策小和尚
本文分享自微信公衆號 - 阿策小和尚（gh_8297e718c166）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。