Flutter Getx BottomNavigation with 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 click 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

GetPage 需要独占。

class AppRouter {
  static final String bottomBar = '/bottomBar';
}

class AppPages {
  static final pages = [
    GetPage(
        name: AppRouter.bottomBar,
        page: () => BottomBar(),
        binding: BottomBarBinding()),
  ];
}

En los bindings inyectas/inicializas los controladores：

class BottomBarBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<OneController>(() => OneController()); 
    Get.lazyPut<TwoController>(() => TwoController()); 
    Get.lazyPut<TreeController>(() => TreeController()); 
  }

En el ButtomBarController：

class BottomBarController extends GetxController {
  final Rx<int> tabIndex = 0.obs;
  final List<Widget> pageList = [
    OnePage(), //0
    TwoPage(), //1
    TreePage(), //2
  ];


  void setPage(int index) {
    tabIndex(index);
  }

Por ultimo solo queda llamar en el Button del bottomBar ala funcion controller.setPage(1)

OJO: Tu IndexedStack debe de estar encerrado en un OBX

class BottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final BottomBarController bottomBarController = Get.find();
    return GetBuilder<BottomBarController>(builder: (controller) {
        child: Scaffold(
          body: SafeArea(
              child: child: Obx(() {
            return IndexedStack(
                index: controller.tabIndex.toInt(),
                children: controller.pageList);
          }),