带有底部导航栏的 Flutter GetX 不更新小部件答案

【问题标题】：Flutter GetX with bottom navigation bar not update the widget带有底部导航栏的 Flutter GetX 不更新小部件
【发布时间】：2021-10-02 22:29:12
【问题描述】：

实际上，我已经解决了这个问题。但这是奇怪的实现。对于这种情况，也许有更好的解决方案。

所以，我有根据底部导航索引显示的屏幕列表

 List<Widget> screenList = [
    HomeScreen(),
    KategoriScreen(),
    PesananScreen(),
    AccountScreen()
  ];

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Obx(() {
        var user = Get.find<AccountController>().user.value; // <= weird Solution to trigger update
        return screenList.elementAt(_mIndex);
      }),
      bottomNavigationBar: _bottomNavWidget(),
    );
  }

其中一个屏幕在小部件中有 Obx()。但是当数据改变时。画面未更新。我们需要更改屏幕索引，然后返回该屏幕以更新小部件。所以，我目前的解决方案是在 Scaffold 中添加 Obx() ，它使用无用的 var (var user) 处理底部导航栏逻辑。有更好的解决方案吗？

更新

很抱歉造成误解。我的问题是帐户控制器何时更新。屏幕不更新。需要更改其他屏幕并返回。另一种解决方案是在父 Widget 中使用 Obx()。但是没有使用用户值

【问题讨论】：

标签： flutter flutter-getx

【解决方案1】：

这是状态管理的原则。您需要设置状态或通知侦听器以刷新 UI。

这里，如果不是你正在看的控制器，只使用Obx是不够的。

我建议您从屏幕列表中创建一个类

class ScreenController extends GetxController{
   int _selectedIndex = 0.obs;
   List<Widget> _screenList = [
    HomeScreen(),
    KategoriScreen(),
    PesananScreen(),
    AccountScreen()
  ];

   selectIndex(int index) => selectedIndex = index;
   getScreen() => _screenList[_selectedIndex];
}

然后你可以简单地将你的 _selectedIndex 封装在你的 Obx 小部件中，当另一个按钮使用 selectIndex 方法时会触发刷新。

（你需要先put ScreenController，像往常一样）

【讨论】：

【解决方案2】：

class ScreenController extends GetxController {
  var tabIndex = 0;

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

这适用于可以使用 indexstack 的小部件屏幕页面

GetBuilder<DashboardController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: IndexedStack(
              index: controller.tabIndex,
              children: [
                Home(),
                HotDeals(),
               ProfilePage(),

              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black,
            selectedItemColor: Colors.redAccent,
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex,
            showSelectedLabels: true,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 0,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.home,
                label: 'Home',
              ),

              _bottomNavigationBarItem(
                icon: CupertinoIcons.photo,
                label: 'Hotdeals',
              ),
             
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person,
                label: 'Profile',
              ),
            ],
          ),
        );
      },
    );

【讨论】：