我的默认选项卡控制器不刷新其选项卡内容

Question

我的应用有一个底部主标签（scaffold 的 bottomNavigationBar）。

在每个选项卡中，我都有一个顶部选项卡栏控制器，只要用户点击底部导航栏的给定选项卡，它就会相应地更改 TabBarView 子项 tabSectionBodies（请参阅我的下面的代码);

此布局是我为改进用户体验而实施的新布局。

但我现在看到的是，当状态改变时，内部选项卡没有更新。

同时，日志显示 refreshCount 正在增加：

I/flutter (26204):  OlenBoxDashboard: Dashboard refresh: 1010
I/flutter (26204):  OlenBoxDashboard: Dashboard refresh: 1011
I/flutter (26204):  OlenBoxDashboard: Dashboard refresh: 1012
I/flutter (26204):  OlenBoxDashboard: Dashboard refresh: 1013

Widget build()如下：

Widget build() {

    // Code has been stripped out for better understanding of the rest

    refreshCount++;
    log("Dashboard refresh: $refreshCount");

    return DefaultTabController(
      length: tabSectionBodies.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(isScrollable: true, tabs: tabSectionTabs),
          title: Text(deviceDisplayName),
        ),
        body: TabBarView(children: tabSectionBodies),

        /// The main (bottom) tab bar
        bottomNavigationBar: Material(
          color: Colors.indigo,
          child: TabBar(
            onTap: (index) {
              log("BottomNavigationBar: index is $index");

              if (index == 0) {
                setState(() {
                  setupBatteryBottomTab();
                });
              } else if (index == 1) {
                setState(() {
                  tabSection = "BMS";
                  tabSectionTabs = [
                    Tab(text: "Main"),
                    Tab(text: "Commands"),
                    //...
                  ];
                  tabSectionBodies = [
                    buildDashboardBatteryBms(0),
                    // ...
                    buildDashboardBatteryBms(6),
                  ];
                });
              } else if (index == 2) {
                setState(() {
                  tabSection = "Smartbox";

     // Code is longer and has been cut off…

Answer 1

好的，我指出了问题所在。

整体结构还可以，除了tabSectionBodies var是通过tabview的内容赋值的，赋值时的状态：

tabSectionBodies = [
                    buildDashboardBatteryBms(0),
                    // ...
                    buildDashboardBatteryBms(6),
                  ];

我为解决此问题所做的工作是设置一个函数，returns 小部件在构建时如下所示：

tabSectionBodies = () => [
                    buildDashboardBatteryBms(0),
                    // ...
                    buildDashboardBatteryBms(6),
                  ];

问题片段变为：

Widget build() {

    // Code has been stripped out for better understanding of the rest

    refreshCount++;
    log("Dashboard refresh: $refreshCount");



    final _tabSectionBodies = tabSectionBodies();


    return DefaultTabController(
      length: _tabSectionBodies.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(isScrollable: true, tabs: tabSectionTabs),
          title: Text(deviceDisplayName),
        ),
        body: TabBarView(children: _tabSectionBodies),

        /// The main (bottom) tab bar
        bottomNavigationBar: Material(
          color: Colors.indigo,
          child: TabBar(
            onTap: (index) {
              log("BottomNavigationBar: index is $index");

              if (index == 0) {
                setState(() {
                  setupBatteryBottomTab();
                });
              } else if (index == 1) {
                setState(() {
                  tabSection = "BMS";
                  tabSectionTabs = [
                    Tab(text: "Main"),
                    Tab(text: "Commands"),
                    //...
                  ];
                  tabSectionBodies = () => [
                    buildDashboardBatteryBms(0),
                    // ...
                    buildDashboardBatteryBms(6),
                  ];
                });
              } else if (index == 2) {
                setState(() {
                  tabSection = "Smartbox";

     // Code is longer and has been cut off…

我的默认选项卡控制器不刷新其选项卡内容

My default tab controller does not refresh its tabs content

flutter

dart

tabs

refresh