tabs - Flutter - 使用带有动态选项卡 View 的 TabBarView 小部件实现抽屉导航

Question

我正在尝试做一个我认为非常简单的 Flutter 应用程序，但我无法弄清楚我的代码出了什么问题。

我有一个带有 抽屉小部件的 Flutter 应用。我正在使用这个小部件来制作 Navigation Drawer，Drawer 有一个 ListView 作为 child ，而 ListView> 包含用户可以选择的查看选项(A、B 和 C)。

由于应用程序的主页(MyHomePage)从 StatefulWidget 扩展而来，我加载新 View 的唯一方法就是调用 setState 方法来分配我的“控制变量”(viewName)的新值，然后我希望 Flutter 执行 Widget build(BuildContext context) 方法>MyHomePage，但这次是 viewName 的新值。

上述所有工作都按预期工作，问题是在 Scaffold 的 body 字段中，我有一个 TabBarView 小部件，因为我想向用户显示每个 View (A、B 和 CTab 1 和 Tab 2)的 View >)。

TabBarView 子项是:

-Tab 1

的 StatefulTab 对象

-Tab 2

的简单 Center 小部件

我想在这里演示的是，当您点击抽屉的一个选项(例如，加载 B View )时，Tab 2 按预期更改它的值，但是当您点击 抽屉

注意:我必须对 3 个 View 使用相同的 StatefulTab 小部件，以便重用代码，因为唯一会改变的值3 个 View 是 viewName 变量。

代码如下:

ma​​in.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/StatefulTab.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.blue,
      ),
      home: new MyHomePage(viewName: 'A'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.viewName}) : super(key: key);

  final String viewName;

  @override
  _MyHomePageState createState() => new _MyHomePageState(viewName: viewName);
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  String viewName;

  _MyHomePageState({Key key, this.viewName});

  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = new TabController(
      length: 2,
      vsync: this,
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var tabs = <Tab>[
      new Tab(icon: new Icon(Icons.home), text: 'Tab 1'),
      new Tab(icon: new Icon(Icons.account_box), text: 'Tab 2')
    ];

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(viewName),
      ),
      body: new TabBarView(controller: controller, children: <Widget>[
        new StatefulTab(viewName: viewName),
        new Center(child: new Text('This is the Tab 2 for view $viewName'))
      ]),
      bottomNavigationBar: new Material(
        color: Colors.blue,
        child: new TabBar(controller: controller, tabs: tabs),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new Padding(
              padding: new EdgeInsets.only(top: 50.0),
            ),
            new ClipRect(
              child: new Column(
                children: <Widget>[
                  new ListTile(
                    title: new Text('Tap to load view: A'),
                    onTap: () => _loadView('A', context),
                  ),
                  new ListTile(
                    title: new Text('Tap to load view: B'),
                    onTap: () => _loadView('B', context),
                  ),
                  new ListTile(
                    title: new Text('Tap to load view: C'),
                    onTap: () => _loadView('C', context),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  _loadView(String view, BuildContext context) {
    Navigator.of(context).pop();
    setState(() {
      if (view == 'A') {
        viewName = 'A';
      } else if (view == 'B') {
        viewName = 'B';
      } else if (view == 'C') {
        viewName = 'C';
      }
    });
  }
}

StatefulTab.dart

import 'package:flutter/material.dart';

class StatefulTab extends StatefulWidget {
  String viewName;

  StatefulTab({Key key, this.viewName}) : super(key: key);

  @override
  StatefulTabState createState() => new StatefulTabState(viewName: viewName);
}

class StatefulTabState extends State<StatefulTab> {
  String viewName;

  StatefulTabState({Key key, this.viewName});

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('This is the Tab 1 for View $viewName'),
    );
  }
}

我如何告诉 Flutter 为 Tab 1 的有状态 wdiget 获取新值？

有没有更好的方法来实现带有动态 View 的抽屉导航？

提前致谢!

Answer 1

我想我发现了你的问题。您在 Homepage 和 StatefulTab 中将 viewName 保留为 State。这实际上是行不通的，因为对于 StatefulTab，状态不会仅仅因为 HomePage 的状态改变而改变。我通过在两种构建方法中插入打印语句得出了这个结论。 HomePage 的 build 方法根据您想要的行为进行操作(正如您在脚手架的标题中已经看到的那样)，但 StatefulTab 的 build 方法保持其状态。

进一步调查和不同地方的各种打印语句使我得出结论，单击抽屉按钮之一后未调用 StatefulTabState 的构造函数。这是您的 StatefulTab 的工作示例:

class StatefulTab extends StatefulWidget {
  String viewName;

  StatefulTab({Key key, this.viewName}) : super(key: key);

  @override
  StatefulTabState createState() => new StatefulTabState();
}

class StatefulTabState extends State<StatefulTab> {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('This is the Tab 1 for View ${widget.viewName}'),
    );
  }
}

如果您有任何问题，请随时发表评论。看看这个 tutorial/documentation 可能对您有所帮助.