Flutter--Drawer、DrawerHeader和Use

一、介绍

Drawer抽屉布局，和Scaffold一起使用，是Scaffold的drawer(左抽屉)、endDrawer(右抽屉)属性
Drawer的头部一般由DrawerHeader或UserAccountsDrawerHeader实现，Drawer的其他子组件一般由ListTitle实现
DrawerHeader自定义布局
UserAccountsDrawerHeader固定模式,可以设置用户头像、用户名、Email 等信息

Drawer主动关闭，直接调用Navigator.pop(context)

二、Drawer源码

onst Drawer({
    Key key,
    this.elevation = 16.0,//阴影大小
    this.child,//子组件
    this.semanticLabel,//通知信息
  }) : assert(elevation != null && elevation >= 0.0),
       super(key: key);

三、Drawer属性

属性	说明
elevation	阴影大小
child	子组件
semanticLabel	drawer打开和关闭时候的通知信息

四、简单实现Drawer的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Drawer学习"),
          ),
          drawer: Drawer(
            child: Center(child: Text("我是左抽屉")),
          ),
          endDrawer: Drawer(
            child: Center(child:Text("我是右抽屉")),
          ),
          ),
    );

1111.png

五、DrawerHeader的源码

const DrawerHeader({
    Key key,
    this.decoration,//header区域的背景
    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),//decoration背景发生变化时动画时间
    this.curve = Curves.fastOutSlowIn,//decoration背景发生curve曲线变化
    @required this.child,
  }) : super(key: key);

六、DrawerHeader属性介绍

属性	说明
child	子组件
decoration	header区域的背景
margin	外边距
padding	内边距
duration	decoration背景发生变化时动画持续时间
curve	decoration背景发生变化会使用curve 设置的曲线变化

七、Drawer和DrawerHeader配合使用的demo

CircleAvatar设置头像组件
Divider分割线组件

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Drawer学习"),
          ),
          drawer: Drawer(
              child: ListView(
                //隐藏黑色导航条
                padding: EdgeInsets.zero,
            children: [
                DrawerHeader(
                  child: Text(
                    "ysl",
                   style: TextStyle(
                     color: Colors.white
                   ),

                  ),
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              "https://www.itying.com/images/flutter/1.png"),
                          fit: BoxFit.cover)),
                ),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                  title: Text("我的主页"),
                ),
                Divider(),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.people),
                  ),
                  title: Text("个人中心"),
                  onTap: (){
                    //点击销毁抽屉布局
                    Navigator.pop(context);
                  },
                ),
                Divider(),
            ],
          )),
          body: Container()),
    );

22222.png

八、UserAccountsDrawerHeader的源码

const UserAccountsDrawerHeader({
    Key key,
    this.decoration,//Header的背景样式
    this.margin = const EdgeInsets.only(bottom: 8.0),//外边距
    this.currentAccountPicture,//用户头像
    this.otherAccountsPictures,//别的头像集合
    @required this.accountName,//用户名
    @required this.accountEmail,//用户email
    this.onDetailsPressed,//accountName 或者 accountEmail 被点击的时候所触发的回调函数
    this.arrowColor = Colors.white,
  }) : super(key: key);

九、UserAccountsDrawerHeader属性介绍

属性	说明
decoration	Header的背景样式
margin	外边距
currentAccountPicture	用户头像
otherAccountsPictures	别的用户头像集合
accountName	用户名
accountEmail	用户的email
onDetailsPressed	accountName 或者 accountEmail 被点击的时候所触发的回调函数

十Drawer和UserAccountsDrawerHeader配合使用的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Drawer学习"),
          ),
        drawer: Drawer(
            child: ListView(
              //隐藏黑色导航条
              padding: EdgeInsets.zero,
              children: [
                UserAccountsDrawerHeader(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage("https://www.itying.com/images/flutter/1.png"),fit: BoxFit.cover
                    )
                  ),
                  currentAccountPicture: CircleAvatar(
                    backgroundImage:NetworkImage("https://www.itying.com/images/flutter/2.png"),
                  ),
                  //别的用户头像，直接用方块代替
                  otherAccountsPictures: [
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.yellow,
                    )
                  ],
                  accountName: Text("ysl"),
                  accountEmail: Text("111111@email"),
                  arrowColor: Colors.yellow,
                  onDetailsPressed: (){
                    print("点击了内容");
                  },


                ),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                  title: Text("我的主页"),
                ),
                Divider(),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.people),
                  ),
                  title: Text("个人中心"),
                  onTap: (){
                    //点击销毁抽屉布局
                    Navigator.pop(context);
                  },
                ),
                Divider(),
              ],
            )),

          ),
    );

3333.png