Question

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

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

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

我的问题是，实现我想做的最好/最正确的方法是什么？

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

由于我还是新手并且学习扑克，我想知道这样做的正确做法。

修改我创建了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,
      ),
    );
  }
}

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

1 个答案: