Flutter组件——侧边栏Drawer

Drawer

在Flutter中的Scaffold中有一个drawe属性，这个属性是定义页面的左边滑动抽屉的。如果我们没有在AppBar中设置自己的leading属性(控制左边的按钮)，Flutter会默认给我配置它自己的按钮。

我们可以首先查看一下Drawer中的构造函数源代码。

const Drawer({
  Key key,
  this.elevation = 16.0,
  this.child,
  this.semanticLabel,
}) : assert(elevation != null && elevation >= 0.0),
     super(key: key);

• elevation

  控制z轴阴影效果，接受一个double。

• child

  子元素，里面通常存放一个Container再嵌套一个ListView。

• semanticLabel

  语意标签，目前还不知道做什么的。

DrawerHearder

源代码

const DrawerHeader({
    Key key,
    this.decoration,
    this.margin = const EdgeInsets.only(bottom: 8.0),
    this.padding = const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
    this.duration = const Duration(milliseconds: 250),
    this.curve = Curves.fastOutSlowIn,
    @required this.child,
  }) : super(key: key);

其中decoration用来设置容器的样式装饰，比如形状，颜色等。margin和padding是用来设置边距的，后面的duration和curve是动画内容，现在我还弄清楚怎么用。

UserAccountsDrawerHeader

如果我们想快速构建个人信息页面的话我们可以直接使用UserAccountDrawerHeader，这个类替我们封装了DrawerHeader，我们可以查看它的源代码。

const UserAccountsDrawerHeader({
    Key key,
    this.decoration,
    this.margin = const EdgeInsets.only(bottom: 8.0),
    this.currentAccountPicture,
    this.otherAccountsPictures,
    @required this.accountName,
    @required this.accountEmail,
    this.onDetailsPressed,
  }) : super(key: key);

我们查看它的build方法就可以知道其中它使用了Drawer

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  assert(debugCheckHasMaterialLocalizations(context));
  return Semantics(
    container: true,
    label: MaterialLocalizations.of(context).signedInLabel,
    child: DrawerHeader(
      decoration: widget.decoration ?? BoxDecoration(
        color: Theme.of(context).primaryColor,
      ),
      margin: widget.margin,
      padding: const EdgeInsetsDirectional.only(top: 16.0, start: 16.0),
      child: SafeArea(
        bottom: false,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Padding(
                padding: const EdgeInsetsDirectional.only(end: 16.0),
                child: _AccountPictures(
                  currentAccountPicture: widget.currentAccountPicture,
                  otherAccountsPictures: widget.otherAccountsPictures,
                ),
              ),
            ),
            _AccountDetails(
              accountName: widget.accountName,
              accountEmail: widget.accountEmail,
              isOpen: _isOpen,
              onTap: widget.onDetailsPressed == null ? null : _handleDetailsPressed,
            ),
          ],
        ),
      ),
    ),
  );
}

我们先来看一下UserAccountDrawer中的属性

• decoration

  盒子装饰属性

• margin

  边距

• currentAccountPricture

  当前用户的头像

• otherAccountPicture

  其他用户的头像，放在当前头像的右边。

• accountName，accountEmail

  用户的名字和邮箱。

Drawer的代码示例

Drawer(
          elevation: 200.0,
          child: Container(
              alignment: Alignment.center,
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  UserAccountsDrawerHeader(
                    accountName: Text('FrancisQiang', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),),
                    accountEmail: Text('2487049041@qq.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage('https://francisqiang.github.io/images/avatar.gif'),
                    ),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage('https://francisqiang.github.io/2019/06/03/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E2%80%94%E2%80%94Trie/10.jpg'),
                          fit: BoxFit.cover,
                          colorFilter: ColorFilter.mode(
                              Colors.purple.withOpacity(0.3),
                              BlendMode.srcOver
                          )
                      ),
                    ),
                  ),
                  ListTile(
                    title: Text('Message', textAlign: TextAlign.right,),
                    trailing: Icon(Icons.message, color: Colors.blueAccent, size: 25.0,),
                  ),
                  ListTile(
                    title: Text('Favorite', textAlign: TextAlign.right,),
                    trailing: Icon(Icons.favorite, color: Colors.red, size: 25.0,),
                  ),
                  ListTile(
                    title: Text('Setting', textAlign: TextAlign.right,),
                    trailing: Icon(Icons.settings,color: Colors.black87, size: 25.0,),
                  ),
                ],
              )
          ),
        ),