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

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

鑒于我2周多的Flutter代碼經驗，代碼結構的思維可能沒有多年開發經驗的老鳥穩，如果有寫的不好的地方請大家多多指教。

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

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

flutter create appbyflutter

根據圖中所示，將項目目錄準備好：

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

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

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

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

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

由于主頁面會動態引用各種控件，因此_StatefulWidget_類型才可以滿足頁面需求。從下圖中分解一下頁面結構：

先看圖左中有狀態控件HomePage為整個頁面的最頂層包裹，其內放入了一個Scaffold腳手架，Scaffold中有非常豐富的屬性，可以放入側邊欄按鈕Drawer控件、頁面標題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,),  //頭部的標題AppBar
      drawer: new Drawer(),  //側邊欄按鈕Drawer
      body: new Center(  //中央內容部分body
        child: new Text("HomePage",style: new TextStyle(fontSize: 35.0),),
      ),
    );
  }
}

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

我們先圖解一下側邊欄的結構：

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

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

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

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

//側邊欄填充內容
drawer: new Drawer(     //側邊欄按鈕Drawer
        child: new ListView(
          children: [
            new UserAccountsDrawerHeader(   //Material內置控件
              accountName: new Text("CYC"), //用戶名
              accountEmail: new Text("example@126.com"),  //用戶郵箱
              currentAccountPicture: new GestureDetector( //用戶頭像
                onTap: () => print("current user"),
                child: new CircleAvatar(    //圓形圖標控件
                  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"),//圖片調取自網絡
                ),
              ),
              otherAccountsPictures: [    //粉絲頭像
                new GestureDetector(    //手勢探測器，可以識別各種手勢，這里只用到了onTap
                  onTap: () => print("other user"), //暫且先打印一下信息吧，以后再添加跳轉頁面的邏輯
                  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")
                  //可以試試圖片調取自本地。調用本地資源，需要到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(),   //點擊后收起側邊欄
            ),
          ],
        ),
      )

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

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

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

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

import "package:flutter/material.dart";

class OtherPage extends StatelessWidget {

  final String pageText;    //定義一個常量，用于保存跳轉進來獲取到的參數

  OtherPage(this.pageText);    //構造函數，獲取參數

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

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

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

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 OtherPage("First Page")));  //進入OtherPage頁面，傳入參數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(); ，意味著先收起側邊欄，再進入新頁面。如果沒有這句代碼，即使進入了新頁面，再返回來，側邊欄依然處于展開的樣子，這個體驗是反人類的，所以寫上它吧~少年。

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