flutter - 我的默认选项卡控制器没有 refresh 它的 tabs 内容

我有一个具有主底部选项卡(bottomNavigationBarscaffold)的应用程序。

在每个选项卡中,我都有一个顶部选项卡栏控制器,每当用户点击底部导航栏的给定选项卡时都会设置它,从而相应地更改 TabBarViewtabSectionBodies (请参阅下面的代码);

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

但是我现在看到的是,当状态发生变化时,内部选项卡没有更新。

同时,日志显示 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…

回答1

好的,我指出了这个问题。

整体结构还可以,只是 tabSectionBodies var 是由 tabview 的内容和赋值时的状态赋值的:

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

我为解决这个问题所做的就是设置一个在构建时返回小部件的函数,如下所示:

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…