一、Drawer 组件
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧 边栏。
return Scaffold(
appBar: AppBar(
title: Text("Flutter App")
),
drawer: Drawer(
child: Text('左侧边栏')
),
endDrawer: Drawer(
child: Text('右侧侧边栏')
)
);
二、DrawerHeader 组件
常见属性
| 属性 | 描述 |
|---|---|
| decoration | 设置顶部背景颜色 |
| child | 配置子元素 |
| padding | 内边距 |
| margin | 外边距 |
drawer: Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.yellow,
image:DecorationImage(
image: NetworkImage("https://upload.jianshu.io/users/upload_avatars/8863827/0979f538-d3e0-4e8c-8a10-23d66837ea0f.jpeg"),
fit:BoxFit.cover
)
),
child: ListView(
children: <Widget>[
Text('我是一个头部')
]
)
),
ListTile(
title: Text("个人中心"),
leading: CircleAvatar(
child: Icon(Icons.people)
),
),
Divider(),
ListTile(
title: Text("系统设置"),
leading: CircleAvatar(
child: Icon(Icons.settings)
),
)
],
)
)
三、UserAccountsDrawerHeader 组件
常见属性
| 属性 | 描述 |
|---|---|
| decoration | 设置顶部背景颜色 |
| accountName | 账户名称 |
| accountEmail | 账户邮箱 |
| currentAccountPicture | 用户头像 |
| otherAccountsPictures | 用来设置当前账户其他账户头像 |
| margin |
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName:Text("一叶知秋"),
accountEmail:Text("coderslzeng@gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage("https://upload.jianshu.io/users/upload_avatars/8863827/0979f538-d3e0-4e8c-8a10-23d66837ea0f.jpeg")
),
decoration: BoxDecoration(
color: Colors.yellow,
image:DecorationImage(
image: NetworkImage("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"),
fit:BoxFit.cover
)
),
otherAccountsPictures: <Widget>[
Image.network("https://upload-images.jianshu.io/upload_images/8863827-6f3e06b72ac3f406.png"),
Image.network("https://upload-images.jianshu.io/upload_images/8863827-2e006a5894bbab1c.png"),
Image.network("https://upload-images.jianshu.io/upload_images/8863827-7bd40d0269c75a40.png")
]
),
ListTile(
title: Text("个人中心"),
leading: CircleAvatar(
child: Icon(Icons.people)
)
),
Divider(),
ListTile(
title: Text("系统设置"),
leading: CircleAvatar(
child: Icon(Icons.settings)
)
)
],
)
)
四、侧边栏路由跳转
onTap: (){
Navigator.of(context).pop();
Navigator.pushNamed(context, '/search');
}
