Flutter 抽屉组件

Flutter 抽屉组件(Drawer)，Drawer可以实现类似抽屉拉出推入的效果。可以从侧边栏拉出导航面板。这样做的好处是可以把一些功能菜单折叠起来。通常Drawer是和ListView组件组合使用的。Drawer组件常见属性如下所示：

Drawer组件可以添加头部效果，用以下两个组件可以实现：

• DrawerHeader：展示基本信息。
• UserAccountsDrawerHeader：展示用户头像、用户名、Email等信息。

DrawerHeader通常用于抽屉中在顶部展示一些基本信息，其属性及描述如表所示:

UserAccountsDrawerHeader可以设置用户头像、用户名和Email等信息，显示一个符合Material Design规范的drawer header。其常用属性如表所示:

从UserAccountsDrawerHeader的属性及描述来看，我们可以写一个示例来模仿QQ侧边导航栏的效果。示例中用到的图片参考图片组件。

示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(
  new MaterialApp(
    title: 'Drawer抽屉组件示例',
    home: new LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: AppBar(
        title: Text('Drawer抽屉组件示例'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
              // 设置用户信息，如头像、用户名、Email等
              UserAccountsDrawerHeader(
                accountName: new Text(
                  "玄微子",
                ),
                accountEmail: new Text(
                  "xuanweizi@163.com",
                ),
                // 设置当前用户头像
                currentAccountPicture: new CircleAvatar(
                  backgroundImage: new AssetImage("images/1.jpeg"),
                ),
                onDetailsPressed: () {},
                // 属性本来是用来设置当前用户的其他账号的头像，这里用作QQ二维码图片
                otherAccountsPictures: <Widget>[
                  new Container(
                    child: Image.asset('images/code.jpeg'),
                  ),
                ],
              ),
              ListTile(
                leading: new CircleAvatar(child: Icon(Icons.color_lens)), //导航栏菜单
                title: Text('个性装扮'),
              ),
              ListTile(
                leading: new CircleAvatar(child: Icon(Icons.photo)),
                title: Text('我的相册'),
              ),
                ListTile(
                  leading: new CircleAvatar(child: Icon(Icons.wifi)),
                  title: Text('免流量特权'),
                ),
              ],
            ),
          ),
        );
      }
  }

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 水平选项卡及视图组件
• Flutter 底部导航条组件
• Flutter 应用按钮组件(AppBar)
• Flutter 脚手架组件(Scaffold)