摘要：側(cè)邊欄我們先圖解一下側(cè)邊欄的結(jié)構(gòu)整個側(cè)邊欄主從上到下按區(qū)塊分別放置了賬號和若干功能項分割線的列表，很容易想到使用布局控件。賬號信息區(qū)域中有賬號頭像粉絲頭像賬號文字信息和背景圖，這塊我們可以使用控件庫的控件實現(xiàn)。

經(jīng)過2周的學(xué)習(xí)，看過筆記1-8的小伙伴們已經(jīng)有不少開始自己寫APP了，我也按耐不住這股熱情，想要自己開發(fā)個APP玩玩，so，從本篇起，仿造一個APP，項目從0開始，每篇增加一些內(nèi)容，一點一點完成這個APP，每次迭代的代碼都將上傳到我的git倉庫。

鑒于我2周多的Flutter代碼經(jīng)驗，代碼結(jié)構(gòu)的思維可能沒有多年開發(fā)經(jīng)驗的老鳥穩(wěn)，如果有寫的不好的地方請大家多多指教。

如上圖所示， 本篇將搭建一個HomePage，再其左上角加入側(cè)邊欄入口，并且通過側(cè)邊欄可以進(jìn)入其他頁面。

創(chuàng)建項目和文件夾。打開vscode，到一個路徑下輸入命令：

flutter create appbyflutter

根據(jù)圖中所示，將項目目錄準(zhǔn)備好：

由于第一篇開發(fā)用到的東西不多，先簡單向項目目錄中添加一個images文件，用于存放APP默認(rèn)圖片。默認(rèn)的lib文件夾下添加一個pages文件夾，用于存放每個頁面。

將main.dart僅作為APP的入口，承擔(dān)頁面入口和路由的功能：

由于APP不只有一個頁面，為了方便維護和管理，所有的頁面代碼都轉(zhuǎn)移到pages文件夾下，main.dart中處理APP的主頁面入口、路由和一系列需要初始化（如自動登陸、入場動畫等）的任務(wù)。有過vue、react開發(fā)經(jīng)驗的前端大神們應(yīng)該不陌生，這樣做可以使主程序和頁面解耦，當(dāng)然本篇還沒有用到路由，暫不書寫路由的代碼，等不及要了解路由的同學(xué)可以參考前端高手偏羅的第一個APP或者英文閱讀理解。

如第一步的圖所示，在pages文件夾中添加了2個文件：home_page.dart和other_page.dart，其中home_page.dart是這個APP的主頁面，other_page.dart作為的以后再開發(fā)的頁面。

注意在第二步的runapp()函數(shù)中，用到了MaterialApp()，意味著程序APP所有的頁面控件默認(rèn)配套_Material_風(fēng)格。

由于主頁面會動態(tài)引用各種控件，因此_StatefulWidget_類型才可以滿足頁面需求。從下圖中分解一下頁面結(jié)構(gòu)：

先看圖左中有狀態(tài)控件HomePage為整個頁面的最頂層包裹，其內(nèi)放入了一個Scaffold腳手架，Scaffold中有非常豐富的屬性，可以放入側(cè)邊欄按鈕Drawer控件、頁面標(biāo)題AppBar控件和body部分，于是貼入以下代碼：

import "package:flutter/material.dart";

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

class _HomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("CYC"), backgroundColor: Colors.redAccent,),  //頭部的標(biāo)題AppBar
      drawer: new Drawer(),  //側(cè)邊欄按鈕Drawer
      body: new Center(  //中央內(nèi)容部分body
        child: new Text("HomePage",style: new TextStyle(fontSize: 35.0),),
      ),
    );
  }
}

OK，左圖的頁面就這么輕松搭建完畢。要實現(xiàn)右圖中的展開的側(cè)邊欄，很簡單，向Drawer控件中塞東西吧。

我們先圖解一下側(cè)邊欄的結(jié)構(gòu)：

整個側(cè)邊欄主從上到下按區(qū)塊分別放置了賬號和若干功能項+分割線的列表，很容易想到使用布局控件ListView。

賬號信息區(qū)域中有賬號頭像、粉絲頭像、賬號文字信息和背景圖，這塊我們可以使用Material控件庫的UserAccountsDrawerHeader控件實現(xiàn)。

下面的功能列表項目不用多說，ListTitle控件妥妥的，分割線直接Divider即可。

于是，我們向new Drawer()中加入如下代碼：

//側(cè)邊欄填充內(nèi)容
drawer: new Drawer(     //側(cè)邊欄按鈕Drawer
        child: new ListView(
          children: [
            new UserAccountsDrawerHeader(   //Material內(nèi)置控件
              accountName: new Text("CYC"), //用戶名
              accountEmail: new Text("example@126.com"),  //用戶郵箱
              currentAccountPicture: new GestureDetector( //用戶頭像
                onTap: () => print("current user"),
                child: new CircleAvatar(    //圓形圖標(biāo)控件
                  backgroundImage: new NetworkImage("https://upload.jianshu.io/users/upload_avatars/7700793/dbcf94ba-9e63-4fcf-aa77-361644dd5a87?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"),//圖片調(diào)取自網(wǎng)絡(luò)
                ),
              ),
              otherAccountsPictures: [    //粉絲頭像
                new GestureDetector(    //手勢探測器，可以識別各種手勢，這里只用到了onTap
                  onTap: () => print("other user"), //暫且先打印一下信息吧，以后再添加跳轉(zhuǎn)頁面的邏輯
                  child: new CircleAvatar(
                    backgroundImage: new NetworkImage("https://upload.jianshu.io/users/upload_avatars/10878817/240ab127-e41b-496b-80d6-fc6c0c99f291?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"),
                  ),
                ),
                new GestureDetector(
                  onTap: () => print("other user"),
                  child: new CircleAvatar(
                    backgroundImage: new NetworkImage("https://upload.jianshu.io/users/upload_avatars/8346438/e3e45f12-b3c2-45a1-95ac-a608fa3b8960?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"),
                    ),
                ),
              ],
              decoration: new BoxDecoration(    //用一個BoxDecoration裝飾器提供背景圖片
                image: new DecorationImage(
                  fit: BoxFit.fill,
                  // image: new NetworkImage("https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg")
                  //可以試試圖片調(diào)取自本地。調(diào)用本地資源，需要到pubspec.yaml中配置文件路徑
                  image: new ExactAssetImage("images/lake.jpg"),
                ),
              ),
            ),
            new ListTile(   //第一個功能項
              title: new Text("First Page"),
              trailing: new Icon(Icons.arrow_upward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SidebarPage()));
              }
            ),
            new ListTile(   //第二個功能項
              title: new Text("Second Page"),
              trailing: new Icon(Icons.arrow_right),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SidebarPage()));
              } 
            ),
            new ListTile(   //第二個功能項
              title: new Text("Second Page"),
              trailing: new Icon(Icons.arrow_right),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed("/a");
              } 
            ),
            new Divider(),    //分割線控件
            new ListTile(   //退出按鈕
              title: new Text("Close"),
              trailing: new Icon(Icons.cancel),
              onTap: () => Navigator.of(context).pop(),   //點擊后收起側(cè)邊欄
            ),
          ],
        ),
      )

上面的代碼，用到了很多陌生的控件，如UserAccountsDrawerHeader、GestureDetector、BoxDecoration、NetworkImage、ExactAssetImage等等，這里我就不一一介紹了，各自的特性和用法請參考官方閱讀理解題庫，剛開始我也是懵逼的，這些內(nèi)置控件大家簡單背誦一下即可，有可能后面因為頁面復(fù)雜度的提高，多帶帶拿出來封裝也說不定，會使用就可以了。

大家可以試試從屏幕的左邊沿向右滑動的手勢，是不是發(fā)現(xiàn)可以拉出側(cè)邊欄？再向右滑動收回側(cè)邊欄。我并沒有添加任何手勢事件的代碼，這是Drawer控件自帶的屬性，和控件自帶Material風(fēng)格動效一樣，內(nèi)置控件也自帶了默認(rèn)手勢，隱隱聽到~原生開發(fā)的程序員哭暈在廁所，哈哈哈

首先我們要創(chuàng)建一個子頁面，于是乎pages文件夾下，我又創(chuàng)建了一個other_page.dart文件。要從HomePage.dart中跳轉(zhuǎn)到other_page.dart，還需要在HomePage.dart中引一下other_page.dart。于是：

然后到other_page.dart中敲入代碼：

import "package:flutter/material.dart";

class OtherPage extends StatelessWidget {

  final String pageText;    //定義一個常量，用于保存跳轉(zhuǎn)進(jìn)來獲取到的參數(shù)

  OtherPage(this.pageText);    //構(gòu)造函數(shù)，獲取參數(shù)

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(pageText),),    //將參數(shù)當(dāng)作頁面標(biāo)題
      body: new Center(
        child: new Text("pageText"),
      ),
    );
  }
}

Flutter要求轉(zhuǎn)入的頁面必須提前定義一個常量分配好空間，且在構(gòu)造函數(shù)中植入這個參數(shù)，才可捕捉外部傳過來的參數(shù)值。

向First Page和Second Page這兩個ListTile控件中加入點擊跳轉(zhuǎn)頁面的代碼：

new ListTile(
    title: new Text("First Page"),
    trailing: new Icon(Icons.arrow_upward),
    onTap: () {
        Navigator.of(context).pop();  //點擊后收起側(cè)邊欄
        Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new OtherPage("First Page")));  //進(jìn)入OtherPage頁面，傳入?yún)?shù)First Page
        }
 ),
new ListTile(
    title: new Text("Second Page"),
    trailing: new Icon(Icons.arrow_right),
    onTap: () {
        Navigator.of(context).pop();
        Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new OtherPage("Second Page")));
    } 
 ),

上面的代碼中onTap()事件里有一句Navigator.of(context).pop(); ，意味著先收起側(cè)邊欄，再進(jìn)入新頁面。如果沒有這句代碼，即使進(jìn)入了新頁面，再返回來，側(cè)邊欄依然處于展開的樣子，這個體驗是反人類的，所以寫上它吧~少年。

由于我沒有詳細(xì)的去定位和設(shè)計產(chǎn)品到底是干什么的，大家可能會覺得有點懵逼，為什么是這種側(cè)邊欄的布局，而不是很多社交APP常用的頂部+底部Tab欄的樣式，不著急，我們下一篇實現(xiàn)。側(cè)邊欄有什么好處呢？節(jié)省空間，如果底部需要放置更重要的功能控件（比如音樂播放器）時，往側(cè)邊欄放入頁面切換邏輯是個不錯的應(yīng)對方案。本篇內(nèi)容其實非常簡單，主要就是介紹大家認(rèn)識幾個常用控件，不用調(diào)CSS，不用思考因為冒泡事件導(dǎo)致復(fù)雜的交互邏輯實現(xiàn)，這就是Flutter的魅力，簡約而不簡單，相信大家看過之后，自行開發(fā)APP的信心更足了，好勒，今天就到這里，感謝大家的支持，請關(guān)注我的Flutter圈子，多多投稿，也可以加入flutter 中文社區(qū)（官方QQ群：338252156）共同成長，謝謝大家~