Flutter GetX跨Dart文件修改selectedIndex的问题及解决诉求

一、页面不切换的原因与修复 #

你的selectedIndex是GetX的可观察变量（.obs），但home.dart中直接将screen[selectedIndex.value]作为body内容，没有用Obx/GetX包裹这个依赖可观察变量的Widget。Flutter只有在Obx/GetX包裹的范围内，才会监听obs变量的变化并触发Widget重建，因此即使修改selectedIndex的值，页面也不会更新。

home.dart 修改代码： #

import 'package:get/get.dart';

// 保持可观察变量与页面列表的定义
var selectedIndex = 0.obs;
final screen = [
  const Page1(),
  const Page2(),
  const Page3(),
  const Page4(),
  const Page5(),
];

// 用Obx包裹body部分，监听selectedIndex的变化
body: Obx(() => screen[selectedIndex.value]),

二、Obx报错的原因与修复 #

你封装的bnbItems中，Obx内部没有使用任何依赖可观察变量的逻辑（比如没有用selectedIndex.value判断选中状态），GetX会检测到这种无效的Obx使用并抛出错误。另外，你还混用了setState——使用GetX的obs变量时不需要调用setState，直接修改.value即可触发更新。

情况1：需要根据选中状态切换图标样式 #

如果导航栏Item需要在选中/未选中状态下显示不同图标，修改后的代码如下：

Widget bnbItems(String normalImage, String selectedImage, int index, double height) {
  return Obx(
    () => InkWell(
      splashColor: Theme.of(context).brightness == Brightness.dark
          ? Colors.white.withOpacity(0.5)
          : Colors.pink.withOpacity(0.5),
      enableFeedback: true,
      onTap: () {
        // 直接修改obs变量值，无需setState
        selectedIndex.value = index;
        _controller.animateTo(index / 4);
      },
      child: Container(
        alignment: Alignment.center,
        width: 50,
        height: 50,
        child: Padding(
          padding: const EdgeInsets.only(top: 5.0),
          child: Image.asset(
            // 根据选中状态切换图标，此时Obx有了明确的依赖
            selectedIndex.value == index ? selectedImage : normalImage,
            height: height,
          ),
        ),
      ),
    ),
  );
}

情况2：无需根据选中状态变化样式 #

如果导航栏Item不需要状态变化，直接去掉Obx即可：

Widget bnbItems(String image, int index, double height) {
  return InkWell(
    splashColor: Theme.of(context).brightness == Brightness.dark
        ? Colors.white.withOpacity(0.5)
        : Colors.pink.withOpacity(0.5),
    enableFeedback: true,
    onTap: () {
      selectedIndex.value = index;
      _controller.animateTo(index / 4);
    },
    child: Container(
      alignment: Alignment.center,
      width: 50,
      height: 50,
      child: Padding(
        padding: const EdgeInsets.only(top: 5.0),
        child: Image.asset(
          image,
          height: height,
        ),
      ),
    ),
  );
}

三、设置特定页面为初始页面 #

只需修改selectedIndex的初始值为目标页面在screen列表中的索引即可：

• 例如设置Page3为初始页（它在列表中的索引是2）：

var selectedIndex = 2.obs;

• 例如设置Page5为初始页（索引是4）：

var selectedIndex = 4.obs;

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