Flutter之drawer詳細分析（你要的操作都有）

rhyme_lph發表於2018-11-09

1. 簡介

這篇文章主要講解有關drawer的一切。

另：接Flutter相關專案，需要的私信或通過QQ：708959817，聯絡我

2. 初探

我們先來看看簡單的drawer在Flutter的應用

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar,
      drawer: _drawer,
    );
  }

  get _appbar=>AppBar(
    title: Text('Drawer Test'),
  );


  get _drawer =>Drawer(
    child: Text('This is Drawer'),
  );
}


複製程式碼

然後執行一下專案：如下圖所示

可以看到，根據我們對drawer的認識，並不是想要的結果，所以這個drawer並不完整，然後我們繼續新增程式碼，修改drawer

///...

  get _drawer => Drawer(
    ///edit start
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.lightBlueAccent,
              ),
              child: Center(
                child: SizedBox(
                  width: 60.0,
                  height: 60.0,
                  child: CircleAvatar(
                    child: Text('R'),
                  ),
                ),
              ),
            ),

            ListTile(
              leading: Icon(Icons.settings),
              title: Text('設定'),
            )
          ],
        ),
    ///edit end
      );
複製程式碼

我這裡新增了 ListView => 裝載抽屜的部件 DrawerHeader =>抽屜的頭部 SizeBox => 用於限制CircleAvatar的大小 CircleAvatar => 頭像部件 ListTile => 一個名為"設定"的點選項然後我們熱部署一下

Oh，emmm....還是很醜的一個drawer嘢！上面那坨灰色的東西是怎麼肥事！不急不急，我們慢慢來分析

3 . 解決Drawer灰色頭部

因為加了一個DrawerHeader,所以，我們需要看看DrawerHeader裡面是什麼原因導致新增灰色的地方 DrawerHeader原始碼：

可以看到: Container=>限制高度（預設高度+狀態列高度） BoxDecoration=> 底部新增毫無用處的分割線 AnimatedContainer =>動畫版的Container新增預設內邊距+頂部狀態列高度的內邊距嗯，感覺沒錯啊，這是怎麼肥事，MediaQuery.of(context).padding.top是獲取狀態列的高度，然後自身高度加上狀態列的高度，應該是顯示藍色才對,那會不會跟ListView有關係呢？我們將DrawerHeader去掉看看

  get _drawer => Drawer(
        child: ListView(
          children: <Widget>[
            ///edit start
//            DrawerHeader(
//              decoration: BoxDecoration(
//                color: Colors.lightBlueAccent,
//              ),
//              child: Center(
//                child: SizedBox(
//                  width: 60.0,
//                  height: 60.0,
//                  child: CircleAvatar(
//                    child: Text('R'),
//                  ),
//                ),
//              ),
//            ),
            ///edit end
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('設定'),
            )
          ],
        ),
      );
複製程式碼

確實，跟ListView有關，這是什麼原因導致ListView加上一個statusBarHeight大小的內邊距呢？我們可以繼續找ListView的原始碼

可以直接點選ListView的構造方法，跳轉到455行可看到 1.當ListView的屬性padding為空時，獲取MediaQueryData的資訊

2.因為ListView的滾動方向預設為垂直，會使用mediaQueryVerticalPadding

3.sliver新增一層MediaQuery，這個表明sliver的子部件會使用該MediaQuery的值，根據判斷，子部件會使用mediaQueryHorizontalPadding，而上面的兩個複製：

mediaQueryHorizontalPadding =>將原有的MediaQuery的padding複製為top和bottom都為0，該值會被子部件使用，所以可以知道，DrawerHeader使用了該值，導致statusBarHeader為0 mediaQueryVerticalPadding =>將原有的MediaQuery的padding複製為left和right都為0

所以，我們只要不讓ListView的padding屬性為空就可以了，這裡我傳入一個zero給ListView，然後把DrawerHeader的註釋去掉，熱部署一下

  get _drawer => Drawer(
        child: ListView(
            ///edit start
          padding: EdgeInsets.zero,
            ///edit end
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.lightBlueAccent,
              ),
              child: Center(
                child: SizedBox(
                  width: 60.0,
                  height: 60.0,
                  child: CircleAvatar(
                    child: Text('R'),
                  ),
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('設定'),
            )
          ],
        ),
      );
複製程式碼

ok，我們成功解決了Drawer灰色頭部

4. 定製Drawer的滑出大小

我們來看看drawer的原始碼，其實看原始碼並不是一件痛苦的事，我們一般直接跳到build方法就好

可以看到Drawer這個部件就是我們平常的一些部件組合而成 Semantics=> 語義，用於給無障礙的 ConstrainedBox => 限制Drawer的寬度的，以至於Drawer不會鋪滿你的螢幕 Material => 新增陰影的咦！聽我這樣解(Hu)釋(Che)，是不是對Drawer這個部件清晰了不少呀！所以，其實Drawer就是一個普通的StatelessWidget，我們完全可以定(Fu)制(Zhi)我們的Drawer，比如定製Drawer的滑出大小

class SmartDrawer extends StatelessWidget {
  final double elevation;
  final Widget child;
  final String semanticLabel;
///new start
  final double widthPercent;
///new end
  const SmartDrawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
///new start
    this.widthPercent = 0.7,
///new end
  }) : 
///new start
   assert(widthPercent!=null&&widthPercent<1.0&&widthPercent>0.0)
///new end
   ,super(key: key);
  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    String label = semanticLabel;
    switch (defaultTargetPlatform) {
      case TargetPlatform.iOS:
        label = semanticLabel;
        break;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        label = semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;
    }
///new start
    final double _width=MediaQuery.of(context).size.width*widthPercent;
///new end
    return Semantics(
      scopesRoute: true,
      namesRoute: true,
      explicitChildNodes: true,
      label: label,
      child: ConstrainedBox(
///edit start
        constraints: BoxConstraints.expand(width: _width),
///edit end
        child: Material(
          elevation: elevation,
          child: child,
        ),
      ),
    );
  }
}
複製程式碼

我這裡將原來的Drawer程式碼基礎上修改_kWidth的值，把它暴露給使用者自己去定製，讓他能傳入一個double型別的寬度百分比，彈出根據螢幕的百分之幾的Drawer，該值只允許傳入大於0小於1的值，預設為0.7 下面我們將上面的Drawer改為我們的SmartDrawer

///edit
get _drawer => SmartDrawer(
        widthPercent: 0.4,
///edit
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.lightBlueAccent,
              ),
              child: Center(
                child: SizedBox(
                  width: 60.0,
                  height: 60.0,
                  child: CircleAvatar(
                    child: Text('R'),
                  ),
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('設定'),
            )
          ],
        ),
      );
複製程式碼

可以看到，我們成功的修改了Drawer彈出的大小

5.監聽Drawer的彈出和關閉

監聽Drawer這裡官方給我們埋了一個坑監聽我們以Tab為例，Flutter會給我我們一個XXXController部件，而Drawer會不會也會有個DrawerController呢？

可以看到，Flutter是有一個DrawerController的,然後我們就將DrawerController新增到我們的_drawer中去

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar,
///edit start
      drawer: DrawerController(
        child: _drawer,
        alignment: DrawerAlignment.start,
        drawerCallback: (isOpen) {
          print('開啟狀態：$isOpen');
        },
      ),
    );
///edit end
  }
複製程式碼

我們來執行一下吧

當我點選AppBar中左邊的按鈕是發現，彈出了一個蒙版，Drawer並沒有彈出來，這是怎麼回事？別急，我們開啟一下佈局邊界

點選Toggle Debug Paint按鈕

會發現，你的佈局左邊有一條矩形，這個是什麼，我們在左邊矩形區域拖動一下看看

誒！我們的Drawer出現了，這是什麼回事？為什麼要拖動兩遍才出現,神奇了？別急，這一切都可以分析 我們先來看看Scaffold是怎麼定義Drawer的 Scaffold原始碼

該程式碼比較簡單： 1.先判斷drawer是否為空，若不為空新增drawer

_addIfNonNull該方法從命名可以看出若不為空新增到children裡面
這裡被新增了一個DrawerController，可知道Flutter寫死了一個DrawerController（這個真的很鬱悶，還不把callback放出來給使用者）由此可以點選_drawerOpendCallback看看做了什麼操作 _drawerOpendCallback部分程式碼：
這裡將值給了_drawerOpened,用於
給endDrawer開啟做判斷,emmm....這個不合理吧！

到這裡，我們可以總結：Scaffold為我們新增了一個DrawerController後，我們又新增了一個DrawerController導致需要滑動兩次才能顯示我們的Drawer,所以，我們可以猜測DrawerController就是控制彈出跟關閉的一個部件

那麼，到這裡，我們基本上想要監聽drawer的彈出跟關閉就是死路一條了。要怎樣監聽呢？我們可不可以通過我們定製的SmartDrawer去監聽呢？這裡先做一個埋點，先來看一段程式碼

///edit start
class SmartDrawer extends StatefulWidget {
///edit end
  final double elevation;
  final Widget child;
  final String semanticLabel;
  final double widthPercent;

  const SmartDrawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
    this.widthPercent,
  })  : assert(widthPercent < 1.0 && widthPercent > 0.0),
        super(key: key);

///edit start
  @override
  _SmartDrawerState createState() => _SmartDrawerState();
///edit end
}

class _SmartDrawerState extends State<SmartDrawer> {

///add start
  @override
  void initState() {
    print('initState');
    super.initState();
  }
  @override
  void dispose() {
    print('dispose');
    super.dispose();
  }
///add end

///edit xxx 2  width.xxx start
  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    String label = widget.semanticLabel;
    switch (defaultTargetPlatform) {
      case TargetPlatform.iOS:
        label = widget.semanticLabel;
        break;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        label = widget.semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;
    }
    final double _width = MediaQuery.of(context).size.width * widget.widthPercent;
    return Semantics(
      scopesRoute: true,
      namesRoute: true,
      explicitChildNodes: true,
      label: label,
      child: ConstrainedBox(
        constraints: BoxConstraints.expand(width: _width),
        child: Material(
          elevation: widget.elevation,
          child: widget.child,
        ),
      ),
    );
  }
}
///edit xxx 2  width.xxx end
複製程式碼

先把SmartDrawer的父類由StatelessWidget改為StatefulWidget，然後新增部件的兩個生命週期（建立和銷燬）然後繼續熱部署進行使用,正常的開啟和關閉Drawer

誒，可以看到，每次的開啟會觸發initState，每次的關閉會觸發dispose，這個不就是我們一直想要的Drawer開啟和關閉嗎？於是可以改成這樣：

class SmartDrawer extends StatefulWidget {
  final double elevation;
  final Widget child;
  final String semanticLabel;
  final double widthPercent;
///add start
  final DrawerCallback callback;
///add end
  const SmartDrawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
    this.widthPercent,
///add start
    this.callback,
///add end
  })  : assert(widthPercent < 1.0 && widthPercent > 0.0),
        super(key: key);
  @override
  _SmartDrawerState createState() => _SmartDrawerState();
}

class _SmartDrawerState extends State<SmartDrawer> {

  @override
  void initState() {
///add start
    if(widget.callback!=null){
      widget.callback(true);
    }
///add end
    super.initState();
  }
  @override
  void dispose() {
///add start
    if(widget.callback!=null){
      widget.callback(false);
    }
///add end
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    String label = widget.semanticLabel;
    switch (defaultTargetPlatform) {
      case TargetPlatform.iOS:
        label = widget.semanticLabel;
        break;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        label = widget.semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;
    }
    final double _width = MediaQuery.of(context).size.width * widget.widthPercent;
    return Semantics(
      scopesRoute: true,
      namesRoute: true,
      explicitChildNodes: true,
      label: label,
      child: ConstrainedBox(
        constraints: BoxConstraints.expand(width: _width),
        child: Material(
          elevation: widget.elevation,
          child: widget.child,
        ),
      ),
    );
  }
}
複製程式碼

現在就可以監聽到drawer的開啟了，完美！

目前遇到上面的定製問題，本篇文章會繼續更新，請持續關注! 如果這篇文章對你有所幫助，希望能討個贊，謝謝！

Flutter基礎（六）Material元件之BottomNavigationBar、TabBar、Drawer
2019-07-09
Flutter元件NavigationtabBar
Flutter 基礎（六）Material 元件之 BottomNavigationBar、TabBar、Drawer
2019-06-12
Flutter元件NavigationtabBar
Flutter drawer側邊欄
2020-12-29
Flutter
詳細分析Redis的持久化操作——RDB與AOF
2020-04-26
Redis持久化
你要的部落格園主題都有！！！
2020-05-19
Flutter 之 AppBar 這樣的騷操作你知道嗎？
2019-03-01
FlutterAPP
Azkaban詳細操作
2020-10-24
Flutter詳細的環境配置
2018-06-28
Flutter
Flutter的staggered GridView詳細使用
2020-05-26
FlutterView
Flutter 系列文章：Flutter Drawer 控制元件介紹
2019-09-17
Flutter控制元件
Flutter混合開發(三)：Android與Flutter之間通訊詳細指南
2019-11-15
FlutterAndroid
TIM開啟你可能認識的人的詳細操作步驟
2020-12-27
flutter - 自定義 Drawer 元件(不依賴 Scaffold)
2023-03-26
Flutter元件
Git 操作命令詳細
2021-10-20
Git
JWT 詳細分析
2018-10-12
JWT
Https詳細分析
2020-09-25
HTTP
（六）Flutter學習之Dart非同步操作詳解
2019-07-24
FlutterDart非同步
mysql之行(記錄)的詳細操作
2019-01-18
MySql
Flutter Sliver你要的瀑布流小姐姐
2019-12-11
Flutter
你裝的系統有毒——“蘇拉克”木馬詳細分析
2020-08-19
java中cookie操作詳細
2021-01-26
JavaCookie
final、finally、finalize的詳細分析
2020-01-20
Flutter系列（一）——詳細介紹
2020-02-17
Flutter
MyBatis的逆向工程詳細步驟操作
2024-06-15
MyBatis
JWT 超詳細分析
2018-10-04
JWT
PE頭詳細分析
2021-11-02
Flutter - Drawer 抽屜檢視與自定義header
2018-07-09
FlutterHeader
Go語言開發的Web框架都有哪些?詳細介紹
2020-12-11
GoWeb框架
Python：檔案操作詳細教程
2024-04-09
Python
深入併發之（四）執行緒池詳細分析
2018-09-14
執行緒
[轉帖]記憶體分析之GCViewer詳細解讀
2024-04-13
記憶體GCView
【UGUI原始碼分析】Unity遮罩之Mask詳細解讀
2021-08-12
UGUI原始碼Unity遮罩
如何錄製螢幕影片？詳細的錄屏操作步驟告訴你
2021-05-21
winscp操作說明，winscp操作說明的詳細解讀
2020-10-19
Flutter之ElevatedButton詳解
2023-10-09
Flutter
好嗨詳細的vuex原始碼分析之API 是如何實現
2018-10-22
Vue原始碼API
Spring Data MongoDB 操作 document DB 的詳細示例
2024-07-09
SpringMongoDB
新手操作抖音桌布號的詳細流程
2022-07-16