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

一、控件介绍

一个边缘侧滑控件，从Scaffold 的边缘水平滑动，以显示应用程序中的导航链接。 抽屉通常与Scaffold.drawer属性一起使用。抽屉的子项通常是ListView，其第一个子项是DrawerHeader ，它显示有关当前用户的状态信息。其余的抽屉儿童往往与构建ListTile ，经常有结束AboutListTile。。

二、使用方法

 Drawer({
    Key key,
    double elevation: 16.0,//侧边栏抽屉相对于其父级放置的z坐标
    Widget child,//侧边栏子控件
    String semanticLabel //可访问性框架用于在打开和关闭抽屉时通知屏幕转换的对话框的语义标签
})
  

三、常用属性

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坐标。

3、设置可访问性框架用于在打开和关闭抽屉时通知屏幕转换的对话框的语义标签,

 semanticLabel: '语义标签'

四、一个完整的例子

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: '语义标签' //可访问性框架用于在打开和关闭抽屉时通知屏幕转换的对话框的语义标签,
          ),
    );
  }
}