思路:侧滑也属于页面路由的一部分,所以先创建页面路由(Scafflod),一个页面包括侧滑区域和主内容区域,侧滑区域又包括头部布局和列表菜单布局,如图。类似Android原生的侧滑效果。
Scafflod一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。如果每个路由页面都需要开发者自己手动去实现这些,这会是一件非常麻烦且无聊的事。幸运的是,Flutter Material组件库提供了一些现成的组件来减少我们的开发任务
首先大体的页面结构;
@override
Widget build(BuildContext context) {
var _select_index;
return Scaffold(
appBar: AppBar(
),
drawer: HomeDrawer(),// 侧滑对象
body: contentPager(
),
bottomNavigationBar: ...忽略
);
}
class HomeDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Drawer( //侧滑对象
child: Column(// 主轴方向
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
DrawerHeader( // 侧滑头部
decoration: BoxDecoration(color: Colors.lightBlueAccent),
child: Center(
child: ClipOval(
child: Image.asset("images/Rice.png", width: 100, height: 100),
),
),
),
Expanded(// 伸展控件
child: ListView(
children: <Widget>[
ListTile(
leading: Image.asset(
"images/Beer.png",
width: 33,
height: 33,
),
title: Text(
"one",
textDirection: TextDirection.ltr,
),
subtitle: Text("sub_title"),
isThreeLine: true,
onTap: () => {print("one")},
),
ListTile(
leading:
Image.asset("images/apple.png", width: 33, height: 33),
title: Text("two"),
onTap: () => {print("two")},
),
ListTile(
leading:
Image.asset("images/Ribs.png", width: 33, height: 33),
title: Text("three"),
),
ListTile(
leading:
Image.asset("images/Rice.png", width: 33, height: 33),
title: Text("four"),
),
],
),
),
],
),
);
}
}