題記 —— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。
重要訊息
示例一
1、 抽屜關閉狀態時點選標籤抽屜會向上開啟，也可配置關閉這個功能； 2、 抽屜關閉狀態時，向上滑動，滑動過一定的高度時自動向上滑動開啟，當沒有滑動過一定的高度時，自動向下滑動，呈關閉狀態； 3、 抽屜開啟狀態時，當滑動檢視處於頂部時，向下滑動，抽屜自動向下滑動關閉，可配置形狀是否開啟這個功能 4、 抽屜開啟狀態時，當向下滑動抽屜時，沒有滑動到一定的距離時放開，抽屜會自動向上滑動回到開啟狀態，當滑動到一定的距離時放開，抽屜會自動向下滑動到關閉狀態； 5、 抽屜關閉狀態時，向上輕掃抽屜，抽屜會向上滑動到開啟狀態，當抽屜開啟狀態時，向下輕掃，抽屜會向下滑動到關閉狀態。
1 新增依賴
實現抽屜效果，技術內容涉及如下：
1、 手勢的拖動 2、 輕掃手勢的識別 3、 Transform的檢視移動 4、 AnimationController的過渡 5、 NotificationListener監聽滑動元件的處理 6、 DragController控制器自定義監聽回撥實現A呼叫B
小編以將這個效果封裝成一個DragContainer元件，在這裡使用drag_container依賴庫，小編已將這個效果封裝成依賴庫供大家使用。
實際專案首先是引用依賴，通過pub倉庫新增依賴，程式碼如下：最新版本檢視這裡
dependencies:
drag_container: ^1.0.1
複製程式碼或者是通過github方式新增依賴，程式碼如下：
dependencies:
drag_container:
git:
url: https://github.com/zhaolongs/drag_container.git
ref: master
複製程式碼然後載入依賴，程式碼如下：
flutter pub get
複製程式碼然後在使用的地方導包，程式碼如下：
import 'package:drag_container/drag_container.dart';
複製程式碼然後就可以使用 DragContainer 抽屜佈局。
2 DragContainer抽屜檢視基本使用
如上圖所示的效果，為抽屜檢視浮在主檢視的上層，所以頁面主體內容可考慮使用層疊佈局，程式碼如下：
///上拉抽屜效果
class BottomDragWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return BottomDragWidgetState();
}
}
class BottomDragWidgetState extends State {
///滑動控制器
ScrollController scrollController = new ScrollController();
///抽屜控制器
DragController dragController = new DragController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("抽屜效果"),
),
backgroundColor: Colors.grey,
///頁面主體使用層疊佈局
body: Stack(
children: <Widget>[
/// ... ... 頁面中其他的檢視
///抽屜檢視
buildDragWidget(),
],
),
);
}
... ... 省略
}
複製程式碼在這裡也宣告建立了一個ScrollController ，用於抽屜檢視中的滑動檢視，宣告的抽屜控制器DragController 用來控制抽屜的開啟與關閉，程式碼如下：
///關閉抽屜
dragController.close();
///開啟抽屜
dragController.open();
複製程式碼buildDragWidget方法就是用來建立DragContainer 抽屜元件的方法，
///構建底部對齊的抽屜效果檢視
Widget buildDragWidget(){
///層疊佈局中的底部對齊
return Align(
alignment: Alignment.bottomCenter,
child: DragContainer(
///抽屜關閉時的高度 預設0.4
initChildRate: 0.1,
///抽屜開啟時的高度 預設0.4
maxChildRate: 0.4,
///是否顯示預設的標題
isShowHeader: true,
///背景顏色
backGroundColor: Colors.white,
///背景圓角大小
cornerRadius: 12,
///自動上滑動或者是下滑的分界值
maxOffsetDistance:1.5,
///抽屜控制器
controller: dragController,
///滑動控制器
scrollController: scrollController,
///自動滑動的時間
duration: Duration(milliseconds: 800),
///抽屜的子Widget
dragWidget: buildListView(),
///抽屜標題點選事件回撥
dragCallBack: (isOpen){ },
),
);
}
複製程式碼在這裡通過buildListView方法來構建了一個抽屜中使用的滑動檢視ListView，需要注意的是，抽屜檢視中一般都使用滑動檢視，程式碼如下：
///可滑動佈局構建 這裡是一個列表ListView
buildListView() {
return ListView.builder(
///列表的控制器 與抽屜檢視關聯
controller: scrollController,
///需要注意的是這裡的控制器需要使用
///builder函式中回撥中的 控制器
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
print("點選事件 $index");
///關閉抽屜
dragController.close();
},
child: ListTile(title: Text('測試資料 $index')));
},
);
}
複製程式碼執行效果如下：