dart - 使用抽屉导航并仅更改正文内容的正确方法是什么？

Question

我正在创建一个基本的 Material 应用程序，我有一个用于导航的抽屉。 通过推送路由的简单方法，整个小部件将被替换，就像打开一个包含全新抽屉的全新页面。 我的目标是创建页面和抽屉的氛围，当用户点击抽屉项目时，抽屉将折叠并且仅页面的内容将被替换。

我找到了这两个问题/答案:

1. Replace initial Route in MaterialApp without animation?
2. Flutter Drawer Widget - change Scaffold.body content

我的问题是实现我想要做的事情的最佳/正确方法是什么？

第一种方法只是通过删除 push/pop 动画来创建幻觉，尽管它实际上仍然像我描述的原始方法一样运行。 第二种方法实际上只替换了内容，我想到的解决方案不是更改文本来创建多个 Container 小部件并在它们之间进行更改。

由于我还是新手并且正在学习 flutter，所以我想知道这样做的正确做法是什么。

编辑: 我创建了 this它工作得很好。我仍然不知道它的效果/效率如何，但现在这正是我想要实现的目标:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: new TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => new _TestPageState();
}

class _TestPageState extends State<TestPage> {
  static final Container info = new Container(
    child: new Center(
        child: new Text('Info')
    ),
  );

  static final Container save = new Container(
    child: new Center(
        child: new Text('Save')
    ),
  );

  static final Container settings = new Container(
    child: new Center(
        child: new Text('Settings')
    ),
  );

  Container activeContainer = info;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        drawer: new Drawer(
          child: new ListView(
            children: <Widget>[
              new Container(child: new DrawerHeader(child: new Container())),
              new Container (
                child: new Column(
                    children: <Widget>[
                      new ListTile(leading: new Icon(Icons.info), title: new Text('Info'),
                          onTap:(){
                            setState((){
                              activeContainer = info;
                            });
                            Navigator.of(context).pop();
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.save), title: new Text('Save'),
                          onTap:(){
                            setState((){
                              activeContainer = save;
                            });
                            Navigator.of(context).pop();
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.settings), title: new Text('Settings'),
                          onTap:(){
                            setState((){
                              activeContainer = settings;
                            });
                            Navigator.of(context).pop();
                          }
                      ),

                    ]
                ),
              )
            ],
          ),
        ),
        appBar: new AppBar(title: new Text("Test Page"),),
        body: activeContainer,
        );
  }
}

Answer 1

是不是您要实现的正是第二个答案中的内容，否？ :/

我在这里通过切换颜色来说明它，但您可以将其应用于内容本身或基本上任何其他小部件。

class NavDrawer extends StatefulWidget {
  @override
  _NavDrawerState createState() => new _NavDrawerState();
}

class _NavDrawerState extends State<NavDrawer> {
  final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
  Color contentColor = Colors.white;
  @override
  initState(){
    super.initState();
      }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new DrawerHeader(child: new Container()),
            new ListTile(title: new Text("Blue"),onTap: (){setState((){contentColor=Colors.blue;Navigator.pop(context);});},),
            new ListTile(title: new Text("Red"),onTap: (){setState((){contentColor=Colors.red;Navigator.pop(context);});},),
            new ListTile(title: new Text("Green"),onTap: (){setState((){contentColor=Colors.green;Navigator.pop(context);});},),
            new ListTile(title: new Text("Yellow"),onTap: (){setState((){contentColor=Colors.yellow;Navigator.pop(context);});},)

          ],
        ),
      ),
      body: new Container(
        color: contentColor,
      ),
    );
  }
}