Flutter Getx BottomNavigation 使用 GetPage

Question

我正在使用带有页面绑定的 getx 导航 - 例如：

GetPage(
  name: Routes.pageone,
  page: () => PageOne(),
  binding: PageOneBinding(),
),
GetPage(
  name: Routes.pagetwo,
  page: () => PageTwo(),
  binding: PageTwoBinding(),
),
GetPage(
  name: Routes.pagethree,
  page: () => PageThree(),
  binding: PageThreeBinding(),
),

每个页面都有自己的控制器和绑定。

通常，为了导航到其他页面，我会 Get.toNamed(Routes.pageone)像这样使用路由。

但是，当我使用选项卡栏/底部导航栏时，我想保留脚手架的应用程序栏和底部导航栏，而只需使用 getx 切换内容。我能够做的唯一方法是为所有页面提供脚手架，并在每次单击每个选项卡时重新加载所有内容，这是低效的，并且每次切换到页面时都会加载不必要的小部件（应用程序栏、标题、底部导航栏等） .)。

加载选项卡内容的常用方法如下

List<Widget> _widgetOptions = <Widget>[
  PageOne(),
  PageTwo(),
  PageThree(),
];

不使用 getx GetPage() 进行绑定，并且会加载所有页面的所有控制器。我找不到使用 GetPage() 和底部导航栏的正确参考。

例如，加载应用程序时我的导航堆栈将/main/pageone在每次切换选项卡时将每个页面堆叠到我的堆栈中。（/main/pageone单击 tab3-> /main/pageone/pagethree）当我按下每个选项卡时，该选项卡的控制器将被加载，并且先前的控制器将被删除。

我不确定应该将什么放入body脚手架中，该脚手架会接收小部件，但使用带有绑定的 GetPage 让我感到困惑。

这是我的应用程序的页面文件代码

class MyPage extends GetView<MyPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Title'),
      ),
      body: 
      /// this is the part where I'm lost on what to put
      SafeArea(
        child: IndexedStack(
          index: controller.curTabIdx.value,
          children: [
            controller.mainContent.value,
          ],
        )
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) => controller.onNavTap(value),
        currentIndex: controller.curTabIdx.value,
        items: [
          BottomNavigationBarItem(label: 'Page 1'),
          BottomNavigationBarItem(label: 'Page 2'),
          BottomNavigationBarItem(label: 'Page 3'),
        ],
      ),
    );
  }
}

如果您还需要控制器代码，我也可以插入它。

Answer 1

我认为你可以通过添加 Obx() 来观察你的 var 来解决这个问题，这样就可以根据你的意愿做出响应。

在第三个支柱中，您可以看到他们谈论使用 Obx() 进行状态管理：

“在 UI 中，当您想要显示该值并在值发生变化时更新屏幕时，只需执行以下操作：”

Obx(() => Text("${controller.name}"));

class MyPage extends GetView<MyPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Title'),
      ),
      body: 
      Obx(
         () {
          return SafeArea(
            child: IndexedStack(
              index: controller.curTabIdx.value,
              children: [
                controller.mainContent.value,
              ],
            )
          );
        }
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) => controller.onNavTap(value),
        currentIndex: controller.curTabIdx.value,
        items: [
          BottomNavigationBarItem(label: 'Page 1'),
          BottomNavigationBarItem(label: 'Page 2'),
          BottomNavigationBarItem(label: 'Page 3'),
        ],
      ),
    );
  }
}