用Flutter创建侧边滚动菜单的技巧（不使用导航器，只改变内容）

一种方法不使用导航，只改变内容。

好处是不用处理导航、来回等复杂的事情。

1。准备工作

新建四个页面，购物车、京东、淘宝、设置。我这里只放了购物车代码，其他的类似。

import 'package:flutter/';

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

2。添加

页面的链接，因为我把它放在同级目录下，所以只是举例。所以引用如下

import './';
import './';
import './';
import './';

实际项目中不建议这样做。您可以创建一个新的页面文件夹并将其放入其中。

3。新建一个空白页面，添加一个抽屉，添加四个ListTiles，分别是购物车、京东、淘宝、设置

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事件，脚手架的主体是空的。 ，尚未设定。 ？ setState 方法用于通知框架内容值已更改。

5。设置 Scaffold

body: new Container(
        child: content,
      ),

6 的内容。开始调试Flutter