一、介绍
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