使用GetX实现Material3 NavigationBar时出现GetX使用不当错误求助

错误根源 #

你遇到的GetX报错，核心原因是包裹NavigationBar的Obx内部没有引用任何可观察变量：

• Material2的BottomNavigationBar需要显式绑定currentIndex: controller.currentIndex.value，因此当时的Obx能监测到可观察变量的变化；
• Material3的NavigationBar默认没有绑定选中索引的属性，导致你当前的Obx包裹的组件里没有用到controller.currentIndex.value，触发了GetX的"不当使用"检测逻辑。

同时，Material3的NavigationBar必须通过selectedIndex属性指定当前选中的目的地，否则用户点击导航项后不会有UI选中状态的反馈，这也是功能上的缺失。

修复方案 #

给NavigationBar添加selectedIndex属性，绑定可观察变量controller.currentIndex.value，让Obx内部有可监测的依赖，同时补全导航栏的选中状态逻辑。

修改后的HomeView代码（保留双Obx结构）

class HomeView extends GetView<HomeController> {
  HomeView({Key? key}) : super(key: key);

  final screens = [
    const MoviesView(),
    const PurchasesView(),
    const ProfileView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(
        () => screens.elementAt(controller.currentIndex.value),
      ),
      bottomNavigationBar: Obx(
        () => NavigationBar(
          selectedIndex: controller.currentIndex.value, // 新增：绑定选中索引
          onDestinationSelected: controller.changeIndex,
          destinations: const <NavigationDestination>[
            NavigationDestination(
              icon: Icon(Icons.movie),
              label: 'Movies',
            ),
            NavigationDestination(
              icon: Icon(Icons.shopping_bag),
              label: 'Purchases',
            ),
            NavigationDestination(
              selectedIcon: Icon(Icons.bookmark),
              icon: Icon(Icons.people),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

优化方案（减少Obx嵌套） #

由于body和bottomNavigationBar都依赖同一个可观察变量currentIndex，可以用一个GetX组件包裹整个Scaffold，让代码结构更简洁：

class HomeView extends GetView<HomeController> {
  HomeView({Key? key}) : super(key: key);

  final screens = [
    const MoviesView(),
    const PurchasesView(),
    const ProfileView(),
  ];

  @override
  Widget build(BuildContext context) {
    return GetX<HomeController>(
      builder: (controller) {
        return Scaffold(
          body: screens.elementAt(controller.currentIndex.value),
          bottomNavigationBar: NavigationBar(
            selectedIndex: controller.currentIndex.value,
            onDestinationSelected: controller.changeIndex,
            destinations: const <NavigationDestination>[
              NavigationDestination(
                icon: Icon(Icons.movie),
                label: 'Movies',
              ),
              NavigationDestination(
                icon: Icon(Icons.shopping_bag),
                label: 'Purchases',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.bookmark),
                icon: Icon(Icons.people),
                label: 'Profile',
              ),
            ],
          ),
        );
      },
    );
  }
}

内容的提问来源于stack exchange，提问作者Vivian Lobo