Flutter 系列文章：Flutter Drawer 控件介紹

1、控件介紹

一個邊緣側滑控件，從Scaffold 的邊緣水平滑動，以顯示應用程序中的導航連接。 抽屜一般與Scaffold.drawer屬性一塊兒使用。抽屜的子項一般是ListView，其第一個子項是DrawerHeader ，它顯示有關當前用戶的狀態信息。其他的抽屜兒童每每與構建ListTile ，常常有結束AboutListTile。。

2、使用方法

Drawer({
    Key key,
    double elevation: 16.0,//側邊欄抽屜相對於其父級放置的z座標
    Widget child,//側邊欄子控件
    String semanticLabel //可訪問性框架用於在打開和關閉抽屜時通知屏幕轉換的對話框的語義標籤
})
  
複製代碼

3、經常使用屬性

1.設置側邊欄的子控件，屜的子項一般是ListView，其第一個子項是DrawerHeader ，它顯示有關當前用戶的狀態信息。其他的抽屜兒童每每與構建ListTile ，常常有結束AboutListTile。。

child: ListView(padding: const EdgeInsets.only(), children: <Widget>[
            //側邊欄子控件
            Container(
              height: 80,
            ),
            new ClipRect(
              child: new ListTile(
                leading: new CircleAvatar(child: new Text("A")),
                title: new Text('Drawer item A'),
                onTap: () => {},
              ),
            ),
            new ListTile(
              leading: new CircleAvatar(child: new Text("B")),
              title: new Text('Drawer item B'),
              subtitle: new Text("Drawer item B subtitle"),
              onTap: () => {},
            ),
            new AboutListTile(
              icon: new CircleAvatar(child: new Text("Ab")),
              child: new Text("About"),
              applicationName: "Test",
              applicationVersion: "1.0",
              applicationIcon: new Image.asset(
                "images/ymj_jiayou.gif",
                width: 64.0,
                height: 64.0,
              ),
              applicationLegalese: "applicationLegalese",
              aboutBoxChildren: <Widget>[
                new Text("BoxChildren"),
                new Text("box child 2")
              ],
            ),
          ]),
複製代碼

2. 設置側邊欄抽屜相對於其父級放置的z座標。。

elevation: 10, //側邊欄抽屜相對於其父級放置的z座標。

複製代碼

三、設置可訪問性框架用於在打開和關閉抽屜時通知屏幕轉換的對話框的語義標籤,

semanticLabel: '語義標籤'

複製代碼

4、一個完整的例子

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

void main() => runApp(MaterialApp(
      title: 'MaterialApp', //用於爲用戶識別應用程序的單行描述
      theme: ThemeData(
        //應用各類 UI 所使用的主題顏色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //操做系統界面中用於應用程序的主要顏色,在Android上，這是應用程序切換器中應用程序使用的顏色。
      home: MaterialAppDemo(), //MaterialApp 顯示的主界面
      routes: <String, WidgetBuilder>{
        // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，相似於網頁的網址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一個顯示的路由名字，默認值爲 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否顯示 材料設計 基礎佈局網格，用來調試 UI 的工具
// showPerformanceOverlay:
// true, // 顯示性能標籤，https://flutter.io/debugging/#performanceoverlay
// showSemanticsDebugger: true,
// debugShowCheckedModeBanner: true,//性能調試工具
    ));

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
      drawer: Drawer(
          child: ListView(padding: const EdgeInsets.only(), children: <Widget>[
            //側邊欄子控件
            Container(
              height: 80,
            ),
            new ClipRect(
              child: new ListTile(
                leading: new CircleAvatar(child: new Text("A")),
                title: new Text('Drawer item A'),
                onTap: () => {},
              ),
            ),
            new ListTile(
              leading: new CircleAvatar(child: new Text("B")),
              title: new Text('Drawer item B'),
              subtitle: new Text("Drawer item B subtitle"),
              onTap: () => {},
            ),
            new AboutListTile(
              icon: new CircleAvatar(child: new Text("Ab")),
              child: new Text("About"),
              applicationName: "Test",
              applicationVersion: "1.0",
              applicationIcon: new Image.asset(
                "images/ymj_jiayou.gif",
                width: 64.0,
                height: 64.0,
              ),
              applicationLegalese: "applicationLegalese",
              aboutBoxChildren: <Widget>[
                new Text("BoxChildren"),
                new Text("box child 2")
              ],
            ),
          ]),
          elevation: 10, //側邊欄抽屜相對於其父級放置的z座標。
          semanticLabel: '語義標籤' //可訪問性框架用於在打開和關閉抽屜時通知屏幕轉換的對話框的語義標籤,
          ),
    );
  }
}


複製代碼