我无法将 GetX 状态管理值分配给整数

Question

我想创建带有 GetX 状态管理的 BottomNavigationBar。我将页面索引保存在我的 GetXController 上。

class PagerController extends GetxController {
  RxInt pageIndex = 0.obs;
  changePageTo(int index) {
    pageIndex.value = index;
  }
}

这是我的 BottomNavigationBar 小部件。它是无状态的。

BottomNavigationBar(
      showSelectedLabels: false,
      showUnselectedLabels: false,
      selectedItemColor: Palette.kSelectedCategoryColor,
      unselectedItemColor: Palette.kUnselectedCategoryTextColor,
      elevation: 0,
      enableFeedback: false,
      currentIndex: controller.pageIndex.value,
      items: items,
      onTap: (index) => controller.changePageTo(index),
    );

onTap 我的 body 正在改变。但是我的底部导航栏的活动图标颜色没有改变。在我看来，它会导致 currentIndex 属性。我放了controller.pageIndex.value，但不是监听值，只渲染一次。如何解决？

Answer 1

首先，您应该将 pageIndex 的类型从 RxInt 更改为 int 或只是 var（添加 .obs 就足够了）。

其次，为了更新 BottomNavigationBar，您需要将其包装在 Obx() 中，例如：

Obx(() => BottomNavigationBar(
      showSelectedLabels: false,
      showUnselectedLabels: false,
      selectedItemColor: Palette.kSelectedCategoryColor,
      unselectedItemColor: Palette.kUnselectedCategoryTextColor,
      elevation: 0,
      enableFeedback: false,
      currentIndex: controller.pageIndex.value,
      items: items,
      onTap: (index) => controller.changePageTo(index),
    )
)

Answer 2

我认为您可以使用 GetBuilder。我通过将您的 navBar 代码替换为来通过我的 DashBoard 页面代码。在这种情况下，事件不需要放置 obs（在控制器中）和 Obx（在视图中）。

  Widget build(BuildContext context) {
    return GetBuilder<DashBoardController>(builder: (controller) {
      return Scaffold(
          body: SafeArea(
            child: IndexedStack(
              index: controller.pageIndex,
              children: [
                HomeScreen(),
                MeScreen(),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
              showSelectedLabels: false,
              showUnselectedLabels: false,
              selectedItemColor: Palette.kSelectedCategoryColor,
              unselectedItemColor: Palette.kUnselectedCategoryTextColor,
              elevation: 0,
              enableFeedback: false,
              currentIndex: controller.pageIndex,
              items: items,
              onTap: controller.changePageTo,
            ),
          );
          
    });
  }

在dash_board_controller.dart中，我们在控制器中获取了changePageTo方法。它执行更新以完成页面刷新工作。

class DashBoardController extends GetxController {
  var tabIndex = 0;

  var getToNamedList = [
    Routes.HOME,
    Routes.ME,
  ];
  final List<BottomNavigationBarItem> navTabList = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      activeIcon: ImageIcon(
        AssetImage('assets/***.png'),
        size: 24,
      ),
      icon: ImageIcon(
        AssetImage('assets/***.png'),
        size: 24,
      ),
      label: "Home",
    ),
    BottomNavigationBarItem(
      activeIcon: ImageIcon(
        AssetImage('assets/***.png'),
        size: 24,
      ),
      icon: ImageIcon(
        AssetImage('assets/***.png'),
        size: 24,
      ),
      // icon: Icon(Icons.person),
      label: "Me",
    ),
  ];

  void changePageTo(int index) {
    tabIndex = index;
    update();
  }
}

Answer 3

您需要使用 Obx 包裹底部导航栏

我无法将 GetX 状态管理值分配给整数

I can not assign GetX state management value to integer

state-management

flutter

flutter-getx