Flutter Getx实现BottomNavigationBar时索引不更新且报ParentDataWidget错误

问题原因及修复方案 #

1. BottomNavigationBar选中状态不同步问题 #

你用到了Getx的响应式变量tabIndex，但BottomNavigationBar没有被Obx包裹，Getx只有在Obx作用域内的响应式变量变化时才会触发对应UI刷新，热重载时整个组件强制重建才会拿到最新值，所以才会出现索引更新但视图没变化的情况。

2. Incorrect use of ParentDataWidget异常问题 #

这个异常是因为BottomNavigationBar的使用位置错误，它只能作为Scaffold组件的bottomNavigationBar属性传值，如果你直接把它放在Row、Stack、Column等普通容器组件中，就会触发该异常。

修正代码 #

第一步：修改BottomNavigation组件，添加Obx包裹，统一使用Get.find获取控制器 #

class BottomNavigation extends StatelessWidget {
  BottomNavigation({
    Key? key,
  }) : super(key: key);

  // 已经在MyApp中put过控制器，这里直接find获取即可，避免重复实例化
  final AppController controller = Get.find<AppController>();

  @override
  Widget build(BuildContext context) {
    // 用Obx包裹BottomNavigationBar，监听tabIndex变化触发刷新
    return Obx(() => BottomNavigationBar(
      currentIndex: controller.tabIndex.value,
      onTap: (index) {
        controller.changeTabIndex(index);
        print(controller.tabIndex.value);
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
      ],
    ));
  }
}

第二步：修正BottomNavigation的使用位置 #

确保你是把BottomNavigation组件传给Scaffold的bottomNavigationBar参数，示例：

// 你首页的Scaffold应该是如下结构
Scaffold(
  body: Obx(
    () => IndexedStack(
      index: appController.tabIndex.value,
      children: Screens.pages,
    ),
  ),
  // 必须放在bottomNavigationBar属性位
  bottomNavigationBar: BottomNavigation(),
)

验证效果 #

修改完成后点击底部导航栏，切换状态会和页面同步更新，ParentData相关异常也会自动消失。

内容的提问来源于stack exchange，提问作者Sharofiddin Azizmatov