Flutter 抽屉部件 - 更改 Scaffold.body 内容

Question

使用Flutter Scaffold.Drawer时，是否可以使抽屉中的链接更改页面上的内容（Scaffold.body）？

类似于在Android中有链接更改Fragment。

- Martin

Answer 1

您只需像这样与您的抽屉项目交互，就可以简单地更改您感兴趣的内容的状态：

以下是此示例的相关代码：

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

class _TestPageState extends State<TestPage> {
  String text = "Initial Text";
  @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),
                          onTap:(){
                              setState((){
                                text = "info pressed";
                              });
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.save),
                          onTap:(){
                            setState((){
                              text = "save pressed";
                            });
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.settings),
                          onTap:(){
                            setState((){
                              text = "settings pressed";
                            });
                          }
                      ),

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

- Shady Aziza

---

刚开始学习Flutter，正是我想要的。我在互联网上找到的所有教程都只是创建新的小部件，复制所有打开的Scaffold作为新的活动。谢谢。 - jasxir

您可以通过在每个onTap属性中调用Navigator.of（context）.pop（）;来自动关闭抽屉而不是手动关闭，从而增强此功能。 - Shady Aziza

很酷，谢谢。我在想是否可以使用导航器来实现这个？ - jasxir

只需在每个 onTap 中使用 Navigator.of(context).pop(); 即可自动关闭抽屉。 - Shady Aziza

让我们在聊天中继续这个讨论。 - jasxir

Answer 2

这是Aziza提供的一个非常好的解决方案！谢谢。它有效！我只想补充一点，通过将其替换为小部件状态，它也可以适用于整个页面的情况：

...
class _TestPageState extends State<TestPage> {
  String text = "Initial Text";
  Widget widgetForBody = SomeWidgetFromClass();
  ...
  ...
        children: <Widget>[
          new Container(child: new DrawerHeader(child: new Container())),
          new Container (
            child: new Column(
                children: <Widget>[
                  new ListTile(leading: new Icon(Icons.info),
                      onTap:(){
                          setState((){
                            widgetForBody = AnotherWidgetFromClass();
                          });
                      }
                  ),
                  new ListTile(leading: new Icon(Icons.save),
                      onTap:(){
                        setState((){
                          widgetForBody = YetAnotherWidgetFromClass();
                        });
                      }
                  ),
...

- brightknight08

Answer 3

您可以将其用作Scaffold的主体内容：

        body: _getDrawerItemWidget(_selectedDrawerIndex));

然后在主类或状态类中这样做：

class HomePageState extends State<HomePage> {
  int _selectedDrawerIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new MainFragment();
      case 1:
          return new CardMgmt();
}
}
}

CardMgmt类和switch case中的其他类都有自己的build方法，该方法将返回一个Widget，并将其放置在Scaffold的body中。它们可以在同一个dart文件中，甚至可以在另一个文件中。
但是我还有一个问题：
如果我们不是在drawer items中，而是在另一个类（如CardMgmt）中有一个按钮，并且我们希望它返回一个Widget并更新页面，该怎么办？

- Mohsen Emami

---

我遇到了同样的问题，你找到解决办法了吗？ - Kim