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')));
      },
    );
  }
複製代碼

運行效果以下：