tabs – Flutter – 使用具有动态Tab视图的TabBarView小部件实现

我有一个带有Drawer小部件的Flutter应用程序.我正在使用这个小部件来制作一个导航抽屉,抽屉有一个ListView作为子节点,ListView包含用户可以选择的视图选项(A,B和C).

由于应用程序的主页面(MyHomePage)从StatefulWidget扩展到我加载新视图的唯一方法是调用setState方法来分配我的“控制变量”(viewName)的新值,然后我期待Flutter执行MyHomePage的Widget构建(BuildContext context)方法,但这次使用viewName的新值.

所有上述工作都按预期工作,问题是在Scaffold的body字段中我有一个TabBarView小部件,因为我想向用户显示每个视图有两个选项卡(Tab 1和Tab 2)的视图(A,B和C).

TabBarView子项是：

– Tab 1的StatefulTab对象

– Tab 2的简单中心小部件

我想在这里演示的是,当你点击抽屉的一个选项(例如加载B视图)时,Tab 2会改变为预期值,但是Tab 1(包含有状态小部件)不会改变它的值.你点击抽屉的任何其他选项

注意：我必须为3个视图使用相同的StatefulTab小部件才能重用代码,因为3个视图的唯一值是viewName变量.

这是代码：

main.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',new ListTile(
                    title: new Text('Tap to load view: C'),onTap: () => _loadView('C',],);
  }

  _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获取新值？

有没有更好的方法来实现具有动态视图的导航抽屉？

提前致谢！