flutter學習（七）Drawer實現側邊欄抽屜

在主頁面上，我們往往需要進行側邊欄滑動，此時需要用到Drawer。

效果

上面是原圖，點擊左上方側的抽屜按鈕，就會彈出抽屜，右側也可以設置抽屜，方法一模一樣。

可以看到，在這裏我設計了三個子項，還有一個頭部，包含背景圖

代碼解析

代碼分成兩部分，第一部分是頭部

Row(
  children: <Widget>[
    Expanded(
      child: DrawerHeader(
        child: Text('這是頭部圖片'),
        decoration: BoxDecoration(
          image:DecorationImage(
            image: NetworkImage("https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"),
            fit:BoxFit.fill
          )
        ),
    ),)
  ],
),

可以看到，這裏加了一個Row，並且使用DrawerHeader組件，背景圖來自於其中的BoxDecoration屬性，設置image的網址和擺放方式即可。

第二部分是下面的選項

 ListTile(
   leading: CircleAvatar(
     child: Icon(Icons.home),
   ),
   title: Text("主頁"),
   onTap: (){
     //跳轉路由代碼
   },
 ),
 Divider(),

對於第一個項“主頁”來說，需要設置的是圖表，名稱和下面的分割線，使用CircleAvatar可以將圖標變成圓形，更加美觀
如果想通過這一項跳轉到對應的路由，只需要添加onTap函數就可以跳轉到指定路由

源代碼

以下是全部源代碼

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',

      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(title:Text("抽屜")),
      body:Center(child:Text("頁面")),
       drawer: Drawer(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                      child: DrawerHeader(
                        child: Text('這是頭部圖片'),
                        decoration: BoxDecoration(
                          image:DecorationImage(
                            image: NetworkImage("https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"),
                            fit:BoxFit.fill
                          )
                        ),
                    ),)
                  ],
                ),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                  title: Text("主頁"),
                  onTap: (){
                    //跳轉路由代碼
                  },
                ),
                Divider(),
                ListTile(
                    leading:CircleAvatar(
                      child: Icon(Icons.folder),
                    ),
                    title:Text("文件")
                ),
                Divider(),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.help),
                  ),
                  title: Text("幫助"),
                )
              ],
            )
        ),
      endDrawer:Drawer(
        child: Text("右側"),
      )
    );
  }
}