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

阿新 • • 發佈：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之drawer詳細分析（你要的操作都有）

1. 簡介

2. 初探

3 . 解決Drawer灰色頭部

4. 定製Drawer的滑出大小

5.監聽Drawer的彈出和關閉

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

java動態代理實現與原理詳細分析（【轉載】By--- Gonjan ）

java動態代理實現與原理詳細分析（【轉載】By--- Gonjan ）

[轉載]springboot中ElasticSearch入門與進階：組合查詢、Aggregation聚合查詢（你想要的都有）

Java基礎之HashMap原理分析（put、get、resize）

Yarn之ResourceManager詳細分析筆記（一）

處理大併發之四 libevent demo詳細分析（對比epoll）

處理大併發之 libevent demo詳細分析（對比epoll）

22.Linux-塊設備驅動之框架詳細分析(詳解)

Mysql 之性能分析（mysqlreport工具）

iOS開發中高階進階書籍資源彙總（你想要了解的這裡都有）

2019年嵌入式開發系統詳細分析告訴你是否還值得去學習

java集合之----ArrayList原始碼分析（基於jdk1.8）

java集合之----HashMap原始碼分析（基於JDK1.7與1.8）

資料結構與演算法篇之複雜度分析（上）

Spring原始碼分析——BeanFactory體系之介面詳細分析

深度學習之---複雜性分析（引數量和計算次數）

linux驅動篇之 driver_register 過程分析（一）

Wireshark之FTP協議分析（一）

文字主題模型之潛在語義分析（LDA:Latent Dirichlet Allocation）

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

1. 簡介

2. 初探

3 . 解決Drawer灰色頭部

4. 定製Drawer的滑出大小

5.監聽Drawer的彈出和關閉

相關推薦