Flutter创建侧滑菜单技巧(不使用navigatior，仅改变content)
一种不使用导航，仅仅改变content即可。
这样做的好处是，不需要来回处理导航和路由那么个复杂的东西。
1. 准备工作
新建四个页面，Cart、JD、Taobiao、Settings。这里仅放一下Cart的代码，其他类似.
import 'package:flutter/';
class Cart extends StatelessWidget{
@override
Widget build(BuildContext context){
returnnew Center(
child: Text('Cart'),
);
}
}
2. 添加页面引用
由于我放在了同级目录，仅作演示。所以引用如下
import './'; import './'; import './'; import './';
实际项目不建议这么操作，可以新建一个pages文件夹，放进去。
3. 新建一个空页面，并添加一个drawer，加入四个ListTile，分别是Cart、JD、Taobiao、Settings
void main() => runApp(new MaterialApp(
home: new NavDrawer(),
));
class NavDrawer extends StatefulWidget {
@override
_NavDrawerState createState() => new _NavDrawerState();
}
class _NavDrawerState extends State<NavDrawer> {
@override
initState() {
();
}
@override
Widget build(BuildContext context) {
returnnew Scaffold(
appBar: new AppBar(),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new ListTile(
title: new Text("Cart"),
trailing: new Icon(),
),
new ListTile(
title: new Text("JD"),
trailing: new Icon(),
),
new ListTile(
title: new Text("Taobiao"),
trailing: new Icon(),
),
new ListTile(
title: new Text("Settings"),
trailing: new Icon(),
)
],
),
),
body: new Container(
),
);
}
}
可以看到我们并没有添加onTap事件，还有Scaffold的body是空的，暂时没有设置。
4. 添加点击事件
这里仅演示Cart的点击代码，其他类似
onTap: () {
setState(() {
content = Cart();
(context);
});
},
里面有一个Cart()赋值给了content，所以需要在类_NavDrawerState的最开始定义一下
同时使用了setState方法，来通知框架content的值已改变。
5. 设置Scaffold的内容
body: new Container(
child: content,
),
6. 运行调试Flutter
THE END
