Flutter - 创建侧滑菜单(不使用navigatior，仅改变content)

之前写过一篇文章，Flutter - 创建横跨所有页面的侧滑菜单。这个里面中使用了Navigator.of(context).push来导航到新的页面。

这次介绍一种不使用导航，仅仅改变content即可。

这样做的好处是，不需要来回处理导航和路由那么个复杂的东西。

 

1. 准备工作

新建四个页面，Cart、JD、Taobiao、Settings。这里仅放一下Cart的代码，其他类似

 

import 'package:flutter/material.dart';

class Cart extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Center(
      child: Text('Cart'),
    );
  }
}

 

 

 

2. 添加页面引用

由于我放在了同级目录，仅作演示。所以引用如下

import './cart.dart';
import './settings.dart';
import './jd.dart';
import './taobiao.dart';

实际项目不建议这么操作，可以新建一个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() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new ListTile(
              title: new Text("Cart"),
              trailing: new Icon(Icons.local_florist),
            ),
            new ListTile(
              title: new Text("JD"),
              trailing: new Icon(Icons.desktop_windows),
            ),
            new ListTile(
              title: new Text("Taobiao"),
              trailing: new Icon(Icons.table_chart),
            ),
            new ListTile(
              title: new Text("Settings"),
              trailing: new Icon(Icons.settings),
            )
          ],
        ),
      ),
      body: new Container(

      ),
    );
  }
}

 

可以看到我们并没有添加onTap事件，还有Scaffold的body是空的，暂时没有设置。

 

 

 

4. 添加点击事件

这里仅演示Cart的点击代码，其他类似 

              onTap: () {
                setState(() {
                  content = Cart();
                  Navigator.pop(context);
                });
              },

 

 里面有一个Cart()赋值给了content，所以需要在类_NavDrawerState的最开始定义一下

dynamic content=Cart();

 

同时使用了setState方法，来通知框架content的值已改变。

 

 

 

 

5. 设置Scaffold的内容

body: new Container(
        child: content,
      ),

 

 

 

6. 运行调试