CupertinoTabBar 和 BottomNavigationBarItem UI 未使用 ChangeNotifierProvider 更新

Question

我正在使用 Flutter Provider 包来管理 currentIndex CupertionTabBar 的状态。我这样做而不是使用 StatefulWidget 的 setState ，因为我想以编程方式从选项卡视图页面内更新当前活动选项卡。

以下是应用代码：

import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: const CupertinoThemeData(
        brightness: Brightness.light,
      ),
      home: ChangeNotifierProvider(
        create: (context) => AppState(),
        child: const TabsPage(),
      ),
    );
  }
}

class TabsPage extends StatelessWidget {
  const TabsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<AppState>(
      builder: (context, appState, child) {
        return CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            backgroundColor: CupertinoColors.white,
            currentIndex: appState.currentTabIndex,
            onTap: (index) => appState.currentTabIndex = index,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.house),
                activeIcon: Icon(CupertinoIcons.house_fill),
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.play_rectangle),
                activeIcon: Icon(CupertinoIcons.play_rectangle_fill),
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.heart),
                activeIcon: Icon(CupertinoIcons.heart_fill),
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.music_albums),
                activeIcon: Icon(CupertinoIcons.music_albums_fill),
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.ellipsis_circle),
                activeIcon: Icon(CupertinoIcons.ellipsis_circle_fill),
              ),
            ],
          ),
          tabBuilder: (context, index) {
            return const TabPage();
          },
        );
      },
    );
  }
}

class TabPage extends StatelessWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoTabView(
      builder: (context) => Consumer<AppState>(
        builder: (context, appState, child) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Current Tab: ${appState.currentTabIndex}'),
              const SizedBox(height: 8.0),
              ...List.generate(
                5,
                    (index) => Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: CupertinoButton.filled(
                    child: Text('Go to tab $index'),
                    onPressed: () => appState.currentTabIndex = index,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class AppState extends ChangeNotifier {
  int _currentTabIndex = 0;

  int get currentTabIndex => _currentTabIndex;

  set currentTabIndex(int index) {
    _currentTabIndex = index;
    notifyListeners();
  }
}

在 DartPad 上查看实时代码及其结果。

正如您所看到的，尽管 AppState.currentTabIndex 正在更新并反映在 Text 小部件中，但当前活动的 BottomNavigationBarItem UI 并未更新。

感谢您的帮助。

Answer 1

正如 CupertinoTabScaffold 的 文档 中所述tabBar 属性：

CupertinoTabBar.currentIndex 仅用于初始化
CupertinoTabController（当未提供控制器时）。随后
提供不同的 CupertinoTabBar.currentIndex 不会影响
脚手架或选项卡栏的活动选项卡索引。以编程方式更改
活动选项卡索引，使用 CupertinoTabController。

如果提供了 CupertinoTabBar.onTap，它仍然会被调用。
CupertinoTabScaffold 也自动监听
CupertinoTabBar的onTap更改控制器的索引并更改
CupertinoTabScaffold 自己的主要内容中主动显示的选项卡
面积。

因此，在 AppState 中保存 CupertinoTabController 实例并更新它的 index 是可行的：

import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: const CupertinoThemeData(
        brightness: Brightness.light,
      ),
      home: ChangeNotifierProvider(
        create: (context) => AppState(),
        child: const TabsPage(),
      ),
    );
  }
}

class TabsPage extends StatelessWidget {
  const TabsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context, listen: false);
    return CupertinoTabScaffold(
      controller: appState.tabController,
      tabBar: CupertinoTabBar(
        backgroundColor: CupertinoColors.white,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.house),
            activeIcon: Icon(CupertinoIcons.house_fill),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.play_rectangle),
            activeIcon: Icon(CupertinoIcons.play_rectangle_fill),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.heart),
            activeIcon: Icon(CupertinoIcons.heart_fill),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.music_albums),
            activeIcon: Icon(CupertinoIcons.music_albums_fill),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.ellipsis_circle),
            activeIcon: Icon(CupertinoIcons.ellipsis_circle_fill),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        return const TabPage();
      },
    );
  }
}

class TabPage extends StatelessWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoTabView(
      builder: (context) {
        final appState = Provider.of<AppState>(context, listen: false);
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Current Tab: ${appState.tabController.index}'),
              const SizedBox(height: 8.0),
              ...List.generate(
                5,
                (index) => Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: CupertinoButton.filled(
                    child: Text('Go to tab $index'),
                    onPressed: () => appState.tabController.index = index,
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class AppState extends ChangeNotifier {
  final tabController = CupertinoTabController();

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }
}