您现在的位置是:首页 >技术交流 >Flutter-Drawer使用网站首页技术交流
Flutter-Drawer使用
drawer
Drawer是Android开发中Material风格常用的设计,就是我们常说的“抽屉”效果,一个从侧边栏拉出来的导航面板。
在Flutter使用Material风格,最为常用的组件之一就是Scaffold了;Scaffold的drawer属性是一个Widget类型的组件,从左侧边栏拉出,通常就是用一个Drawer对象实现(Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板);
如果没有设置AppBar的leading属性,则当使用Drawer的时候会自动显示一个IconButton来告诉用户有侧边栏(在 Android 上通常是显示为三个横的图标)。
Drawer的child属性定义了其展示的内容,通常是用一个 ListView来实现,而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息,最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader 。
DrawerHeader
通常用于在抽屉中在顶部展示一些基本信息;其包含如下属性:
decoration:header区域的decoration,通常用来设置背景颜色或者背景图片
duration 和 curve:如果decoration发生了变化,则会使用 curve设置的变化曲线和duration设置的动画时间来做一个切换动画
child: Header里面所显示的内容控件
padding: Header里面内容控件的padding值,如果child为null,则这个值无效
margin:Header四周的间隙
如果想在DrawerHeader中显示用户账户信息,比如类似于 Gmail 的 联系人头像、用户名、Email 等信息,则可以使用 UserAccountsDrawerHeader这个特殊的DrawerHeader。
UserAccountsDrawerHeader
UserAccountsDrawerHeader可以设置用户头像、用户名、Email 等信息,显示一个符合MD规范的 drawer header。其常用属性如下:
margin:Header四周的间隙
decoration:header区域的decoration,通常用来设置背景颜色或者背景图片
currentAccountPicture:用来设置当前用户的头像
otherAccountsPictures:用来设置当前用户的其他账号的头像(做多显示三个)
accountName:当前用户的名字
accountEmail:当前用户的 Email
onDetailsPressed: 当 accountName 或者 accountEmail 被点击的时候所触发的回调函数,可以用来显示其他额外的信息
DrawerItem
DrawerItem封装了常用的Drawer菜单Item样式,其主要属性如下:
icon:配置菜单项的图标和图标尺寸、颜色
child:具体的菜单项内容
onPressed:当点击菜单项的时候所触发的回调函数
selected: 当前菜单项是否选中了
我将DrawerItem添加了删除线,因为在最新的Flutter中已经找不到DrawerItem这个类了,可以使用ListTiles 和 AboutListTiles作为替代
Sample
class HomeBuilder {
static Widget homeDrawer() {
return new ListView(padding: const EdgeInsets.only(), children: <Widget>[
_drawerHeader(),
new ClipRect(
child: new ListTile(
leading: new CircleAvatar(child: new Text("A")),
title: new Text('Drawer item A'),
onTap: () => {},
),
),
new ListTile(
leading: new CircleAvatar(child: new Text("B")),
title: new Text('Drawer item B'),
subtitle: new Text("Drawer item B subtitle"),
onTap: () => {},
),
new AboutListTile(
icon: new CircleAvatar(child: new Text("Ab")),
child: new Text("About"),
applicationName: "Test",
applicationVersion: "1.0",
applicationIcon: new Image.asset(
"images/ymj_jiayou.gif",
width: 64.0,
height: 64.0,
),
applicationLegalese: "applicationLegalese",
aboutBoxChildren: <Widget>[
new Text("BoxChildren"),
new Text("box child 2")
],
),
]);
}
static Widget _drawerHeader() {
return new UserAccountsDrawerHeader(
// margin: EdgeInsets.zero,
accountName: new Text(
"SuperLuo",
style: HStyle.titleNav(),
),
accountEmail: new Text(
"xxx",
style: HStyle.bodyWhite(),
),
currentAccountPicture: new CircleAvatar(
backgroundImage: new AssetImage("images/ymj_jiayou.gif"),
),
onDetailsPressed: () {},
otherAccountsPictures: <Widget>[
new CircleAvatar(
backgroundImage: new AssetImage("images/ymj_shuijiao.gif"),
),
],
);
}
}
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBase.appBar("Home"),
drawer: new Drawer(
child: HomeBuilder.homeDrawer(),
),
);
}
}
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or press Run > Flutter Hot Reload in IntelliJ). Notice that the
// counter didn't reset back to zero; the application is not restarted.
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
运行效果截图:
可以看到Flutter提供的组件封装的已经非常耐用了。
作者:SupLuo
链接:https://www.jianshu.com/p/70e0324c0204