Flutter - 通过TabBarView小部件实现带有动态Tab视图的导航抽屉

Question

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

我有一个Flutter应用程序抽屉部件。我使用这个插件做出抽屉式导航，则抽屉有的ListView作为一个孩子和的ListView包含查看选项（A，B和C），用户可以从中选择。

由于应用程序的主页（MyHomePage）从StatefulWidget，我做加载新的视图来调用的setState方法来分配我的“控制变量的新价值的唯一东西宽“（的viewName），那么我希望扑执行控件版本（BuildContext上下文）MyHomePage的方法，但用的的viewName这一次的新价值。

所有预期上述工程中，这个问题是在脚手架的体场我有一个TabBarView小部件，因为我想展现给用户提供两个选项卡视图（表1和表2）每个视图（A，B和C）。

的TabBarView孩子：

-A StatefulTab对象标签1

-A简单中心部件为标签2

我想什么演示这里是当你点击o抽屉的ption（负载例如乙视图）的标签2个变化作为预期它的价值，但标签1（包含状态插件）不改变它的在点击任何其他值的选项抽屉

注：我必须使用相同的StatefulTab部件为3次，以重用的代码，因为这改变了3次唯一的价值是的viewName变量。

下面是代码：

为主。镖

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'), 
    ); 
    } 
} 

我怎么能告诉扑，是以新的价值，为标签1的状态wdiget？

有更好的方式来实现一个导航抽屉与动态视图？

提前致谢！

Answer 1

我想我找到了你的问题。您在您的主页中保留viewName作为状态，并在StatefulTab中保留。这不可能真正起作用，因为对于StatefulTab，状态不会仅仅因为主页的状态改变而改变。我通过在两种构建方法中插入打印语句来得出这个结论。主页的构建方法根据您期望的行为（您已经在脚手架的标题中看到）行动，但StatefulTab的构建方法保持其状态。

进一步调查和各种地方的各种打印语句让我得出结论，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。