Drawer 侧边栏
drawer: Drawer(
child: Text('左侧边栏'),
),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
DrawerHeader
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: DrawerHeader(
child: Text("你好flutter"),
decoration:BoxDecoration(
color: Colors.yellow,
image: DecorationImage(
image: NetworkImage("https://profile.csdnimg.cn/B/0/A/1_qq_39424143"),
fit:BoxFit.cover,
)
)
)
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home)
),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people)
),
title: Text("用户中心"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings)
),
title: Text("设置中心"),
),
Divider(),
],
),
UserAccountsDrawerHeader效果较佳
属性 | 释义 |
decoration | 设置背景样式 |
accountName | 账户名称 |
accountEmail | 账户邮箱 |
currentAccountPicture | 用户头像 |
otherAccountsPictures | 用来设置当前用户其他账户头像 |
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: UserAccountsDrawerHeader(
accountName:Text("wjxbless"),
accountEmail: Text("xxx@qq.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage("https://profile.csdnimg.cn/B/0/A/1_qq_39424143"),
),
decoration:BoxDecoration(
image: DecorationImage(
image: NetworkImage("http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23269_s.jpg"),
fit:BoxFit.cover,
)
),
)
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home)
),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people)
),
title: Text("用户中心"),
onTap: (){
Navigator.of(context).pop(); // 点击后收起抽屉
Navigator.pushNamed(context, '/user');
},
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings)
),
title: Text("设置中心"),
),
Divider(),
],
),
),
