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

概述我正在尝试做我认为是一个非常简单的Flutter应用程序,但我无法弄清楚我的代码出了什么问题. 我有一个带有Drawer小部件的Flutter应用程序.我正在使用这个小部件来制作一个导航抽屉,抽屉有一个ListView作为子节点,ListView包含用户可以选择的视图选项(A,B和C). 由于应用程序的主页面(MyHomePage)从StatefulWidget扩展到我加载新视图的唯一方法是调用s 我正在尝试做我认为是一个非常简单的Flutter应用程序,但我无法弄清楚我的代码出了什么问题.

我有一个带有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获取新值？

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

提前致谢！

解决方法 我想我找到了你的问题.您将vIEwname保留为主页中的State,另外还保留在StatefulTab中.这实际上不起作用,因为对于StatefulTab,状态不会因为HomePage的状态发生变化而改变.我通过在两个构建方法中插入print语句得出了这个结论. HomePage的构建方法根据您所需的行为进行 *** 作(正如您在脚手架的标题中看到的那样),但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可能是有益的.

总结

以上是内存溢出为你收集整理的tabs – Flutter – 使用具有动态Tab视图的TabBarView小部件实现导航抽屉全部内容，希望文章能够帮你解决tabs – Flutter – 使用具有动态Tab视图的TabBarView小部件实现导航抽屉所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。