Flutter 控件-Drawer使用

2018-05-21 本文已影响179人 SupLuo

Drawer

Drawer是Android开发中Material风格常用的设计，就是我们常说的“抽屉”效果，一个从侧边栏拉出来的导航面板。

在Flutter使用Material风格，最为常用的组件之一就是Scaffold了；Scaffold的drawer属性是一个Widget类型的组件，从左侧边栏拉出，通常就是用一个Drawer对象实现（Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板）；

如果没有设置AppBar的leading属性，则当使用Drawer的时候会自动显示一个IconButton来告诉用户有侧边栏（在 Android 上通常是显示为三个横的图标）。

Drawer的child属性定义了其展示的内容，通常是用一个 ListView来实现，而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息，最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader 。

DrawerHeader

通常用于在抽屉中在顶部展示一些基本信息；其包含如下属性：

decoration：header区域的decoration，通常用来设置背景颜色或者背景图片
duration 和 curve：如果decoration发生了变化，则会使用 curve设置的变化曲线和duration设置的动画时间来做一个切换动画
child: Header里面所显示的内容控件
padding: Header里面内容控件的padding值，如果child为null，则这个值无效
margin:Header四周的间隙

如果想在DrawerHeader中显示用户账户信息，比如类似于 Gmail 的联系人头像、用户名、Email 等信息，则可以使用 UserAccountsDrawerHeader这个特殊的DrawerHeader。

UserAccountsDrawerHeader

UserAccountsDrawerHeader可以设置用户头像、用户名、Email 等信息，显示一个符合MD规范的 drawer header。其常用属性如下：

margin:Header四周的间隙
decoration:header区域的decoration，通常用来设置背景颜色或者背景图片
currentAccountPicture：用来设置当前用户的头像
otherAccountsPictures：用来设置当前用户的其他账号的头像(做多显示三个)
accountName：当前用户的名字
accountEmail：当前用户的 Email
onDetailsPressed：当 accountName 或者 accountEmail 被点击的时候所触发的回调函数，可以用来显示其他额外的信息

DrawerItem

DrawerItem封装了常用的Drawer菜单Item样式，其主要属性如下：

icon:配置菜单项的图标和图标尺寸、颜色
child:具体的菜单项内容
onPressed:当点击菜单项的时候所触发的回调函数
selected: 当前菜单项是否选中了

我将DrawerItem添加了删除线，因为在最新的Flutter中已经找不到DrawerItem这个类了，可以使用ListTiles 和 AboutListTiles作为替代

Sample

class HomeBuilder {
  static Widget homeDrawer() {
    return new ListView(padding: const EdgeInsets.only(), children: <Widget>[
      _drawerHeader(),
      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")
        ],
      ),
    ]);
  }

  static Widget _drawerHeader() {
    return new UserAccountsDrawerHeader(
//      margin: EdgeInsets.zero,
      accountName: new Text(
        "SuperLuo",
        style: HStyle.titleNav(),
      ),
      accountEmail: new Text(
        "super_luo@163.com",
        style: HStyle.bodyWhite(),
      ),
      currentAccountPicture: new CircleAvatar(
        backgroundImage: new AssetImage("images/ymj_jiayou.gif"),
      ),
      onDetailsPressed: () {},
      otherAccountsPictures: <Widget>[
        new CircleAvatar(
          backgroundImage: new AssetImage("images/ymj_shuijiao.gif"),
        ),
      ],
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBase.appBar("Home"),
      drawer: new Drawer(
        child: HomeBuilder.homeDrawer(),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

运行效果截图：

image.png

点击About之后：