flutter上拉抽屜效果，flutter拖動抽屜效果

題記 —— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

重要訊息

• 網易雲【玩轉大前端】配套課程

• EDU配套 教程

• Flutter開發的點滴積累系列文章

---

示例一

示例二

1 新增依賴

實現抽屜效果，在這裡使用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')));
      },
    );
  }
複製程式碼

執行效果如下：