You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

GetX的Obx无法更新ListView、GridView和BottomNavigationBar的UI问题求助

GetX的Obx无法更新ListView、GridView和BottomNavigationBar的UI问题求助

各位好,我现在在做一个Flutter项目,用GetX的Obx来监听可观察变量的变化以更新UI,但遇到了一个棘手的问题:分类标签ListView、商品GridView和底部导航栏都没法跟着变量变化同步更新。

我已经给需要监听的变量加了.obs,甚至在点击事件的处理方法里特意调用了refresh()和update(),但UI完全没反应。下面是我的关键代码,麻烦大家帮我看看哪里出错了?

HomeScreen 代码

class HomeScreen extends GetView<HomeController> {
  HomeScreen({super.key});
  ColorManager colorController = ColorManager();
  ImageManager imageController = ImageManager();

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: colorController.whiteColor,
      body: SingleChildScrollView(
        padding: EdgeInsets.only(top: 38, bottom: 18, right: 18, left: 18),
        child: Column(
          spacing: 18,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Obx(() {
              return SizedBox(
                height: height * 0.05,
                child: ListView.separated(
                  separatorBuilder: (context, index) => SizedBox(width: 8),
                  scrollDirection: Axis.horizontal,
                  itemCount: controller.fashionList.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () {
                        controller.setCategory(index);
                      },
                      child: Container(
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(18),
                          border: Border.all(
                            color: controller.fashionCategoryIndex.value == index
                                ? Colors.transparent
                                : colorController.primaryColor,
                          ),
                          color: controller.fashionCategoryIndex.value == index
                              ? colorController.primaryColor
                              : colorController.whiteColor,
                        ),
                        child: Padding(
                          padding: const EdgeInsets.only(left: 18, right: 18),
                          child: Text(
                            controller.fashionListTitle[index],
                            style: TextStyle(
                              color: controller.fashionCategoryIndex.value == index
                                  ? colorController.whiteColor
                                  : colorController.primaryColor,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              );
            }),
            Obx(() {
              return GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 5 / 7,
                  crossAxisSpacing: 18,
                  mainAxisSpacing: 12,
                ),
                physics: NeverScrollableScrollPhysics(),
                itemCount: controller
                    .fashionList[controller.fashionCategoryIndex.value]
                    .length,
                itemBuilder: (context, index) {
                  return FashionProductCard(
                    fashionModel: controller.fashionList[
                        controller.fashionCategoryIndex.value][index],
                  );
                },
              );
            }),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 28,
        backgroundColor: colorController.whiteColor,
        selectedItemColor: colorController.primaryColor,
        unselectedItemColor: colorController.blackColor,
        type: BottomNavigationBarType.fixed,
        currentIndex: controller.navBarItemSelectedIndex.value,
        onTap: (index) {
          controller.setNavBarItem(index);
        },
        items: [
          BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)),
          BottomNavigationBarItem(
            label: "Trending",
            icon: Icon(Icons.newspaper_outlined),
          ),
          BottomNavigationBarItem(
            label: "Favorites",
            icon: Icon(Icons.favorite_border),
          ),
          BottomNavigationBarItem(
            label: "Cart",
            icon: Icon(Icons.shopping_bag_outlined),
          ),
          BottomNavigationBarItem(
            label: "Profile",
            icon: Icon(Icons.person_3_outlined),
          ),
        ],
      ),
    );
  }
}

HomeController 代码

class HomeController extends GetxController {
  RxInt fashionCategoryIndex = 0.obs;
  RxInt navBarItemSelectedIndex = 0.obs;

  setNavBarItem(int index) {
    navBarItemSelectedIndex.value = index;
    navBarItemSelectedIndex.refresh();
    update();
  }

  setCategory(int index) {
    fashionCategoryIndex.value = index;
    fashionCategoryIndex.refresh();
    update();
  }
}

我已经确认点击事件确实触发了,setCategory和setNavBarItem方法里的变量值也确实发生了改变,但UI就是纹丝不动。有没有朋友能帮我找出问题所在?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 08:09:33