Flutter Drawer 实现左侧横滑菜单
一、Scalfold 的 Drawer
Scalfold 是 Flutter MaterialApp 常用的布局 Widget,他接受一个 drawer
属性,支持配置 Drawer
Drawer 是 Flutter 提供的能够实现左侧横滑的 Widget,构造非常简单:
const Drawer({
Key key,
this.elevation = 16.0,
this.child,
this.semanticLabel,
})
Drawer Widget 的 child 支持传入别的 Widget 实现布局,一般我们都会传入一个 ListView 或者 Column,进行纵向布局
目标是实现如下的效果:
整个左侧滑入的 View 都是 Drawer 提供的基本能力,我们需要做的,其实就是去进行立面的 Widget 布局
UI 布局这里不说太多,没什么意义,贴一下顶部的头像背景 Header 区域布局实现:
class DrawerHeaderDemo extends StatelessWidget {
const DrawerHeaderDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DrawerHeader(
child: Column(
children: <Widget>[
ClipOval(
child: Image.network(
IMAGE_SRC,
width: 65,
height: 65,
fit: BoxFit.cover,
),
),
SizedBox(height: 20),
Center(
child: Text(
'Postbird',
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 10),
Center(
child: Text(
'没有任何描述~',
style: TextStyle(color: Colors.white),
),
),
],
),
decoration: BoxDecoration(
color: Colors.grey[350],
image: DecorationImage(
image: NetworkImage(IMAGE_SRC_2),
fit: BoxFit.cover,
),
),
);
}
}
最终效果:
完整的代码在文章最下面可以找到。
二、UserAccountsDrawerHeader Flutter 提供的快速布局实现
上面实现用户信息的代码中可以发现实现布局比较复杂,如果对布局没有特别高的要求,可以直接使用 Flutter 提供的 UserAccountsDrawerHeader
这个 Widget
提供了默认的用户信息 Header,样式如下:
UserAccountsDrawerHeader 构造函数声明如下:
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,
})
借助 Widget 直接实现布局:
return UserAccountsDrawerHeader(
accountName: Text('postbird'),
accountEmail: Text('没有任何描述~'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(IMAGE_SRC),
backgroundColor: Colors.grey[350],
),
otherAccountsPictures: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(IMAGE_SRC),
backgroundColor: Colors.grey[350],
),
],
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(IMAGE_SRC_2),
fit: BoxFit.cover,
),
color: Colors.grey[350],
),
);
如果要在 Drawer
中实现跳转,只需要使用 Navigator 做两个事情:
Navigator.of(context).pop();
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => UserPage()));
比如我一个实现如下:
class DrawerHeaderDemo extends StatelessWidget {
const DrawerHeaderDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return UserAccountsDrawerHeader(
accountName: Text('postbird'),
accountEmail: Text('没有任何描述~'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(IMAGE_SRC),
backgroundColor: Colors.grey[350],
),
otherAccountsPictures: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(IMAGE_SRC),
backgroundColor: Colors.grey[350],
),
],
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(IMAGE_SRC_2),
fit: BoxFit.cover,
),
color: Colors.grey[350],
),
);
}
}
class ListItem extends StatelessWidget {
const ListItem({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.pink,
child: Icon(Icons.home),
),
title: Text('首页'),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => UserPage()));
}),
);
}
}
最终效果:
三、完整代码
1、Dawer
2、UserAccountsDrawerHeader 实践代码
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/flutter-drawer-menu.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!