如何在颤动中访问之前使底部导航栏不加载屏幕

Question

我在我的项目中使用 Getx 状态管理。如果我在颤振中使用底部导航栏，我的应用会同时加载太多控制器，因此性能很差。

我想一次只加载一个屏幕，除非我不访问导航栏的另一个索引。

我如何在我的代码中实现这一点，目前登录后它会在我访问之前加载每个屏幕，这让我很难，因为我希望在显示屏幕之前重新加载数据。

import 'package:projectName/views/home/index.dart';
import 'package:projectName/views/profile/index.dart';
import 'package:projectName/views/profile/views/Prescription/index.dart';
import 'package:projectName/views/profile/views/orders/index.dart';
import 'package:projectName/widgets/BottomNavigator/BottomNavigatorController.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BottomNavigatorWidget extends StatelessWidget {
  final BottomNavigatorController controller =
      Get.put(BottomNavigatorController());
  @override
  Widget build(BuildContext context) {
    return GetBuilder<BottomNavigatorController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: IndexedStack(
              index: controller.tabIndex.value,
              children: [
                Homepage(),
                MyOrders(),
                PrescriptionPage(),
                MyProfile(),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black45,
            selectedItemColor: Color(0xFF2e3192),
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex.value,
            showSelectedLabels: true,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 50,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.house_fill,
                label: 'Home',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.cube_box_fill,
                label: 'My Orders',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.square_list_fill,
                label: 'Prescription',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person_alt_circle_fill,
                label: 'Account',
              ),
            ],
          ),
        );
      },
    );
  }

  _bottomNavigationBarItem({IconData icon, String label}) {
    return BottomNavigationBarItem(
      icon: Icon(icon),
      label: label,
    );
  }
}

这是 Controller.dart 文件

import 'package:get/get.dart';

class BottomNavigatorController extends GetxController {
  Rxn<int> tabIndex = Rxn<int>(0);

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

Answer 1

IndexedStack 小部件的目的是在多个小部件中一次显示一个小部件。但是，IndexedStack 将构建并加载在加载期间传递给它的所有小部件，这会导致在您的应用中同时加载过多的控制器。

尝试使用 TabBarView 或普通列表而不是 IndexedStack

import 'package:projectName/views/home/index.dart';
import 'package:projectName/views/profile/index.dart';
import 'package:projectName/views/profile/views/Prescription/index.dart';
import 'package:projectName/views/profile/views/orders/index.dart';
import 'package:projectName/widgets/BottomNavigator/BottomNavigatorController.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BottomNavigatorWidget extends StatelessWidget {
  final BottomNavigatorController controller =
      Get.put(BottomNavigatorController());

  final _pages = [
    Homepage(),
    MyOrders(),
    PrescriptionPage(),
    MyProfile(),
  ];

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BottomNavigatorController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: _pages[controller.tabIndex.value],
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black45,
            selectedItemColor: Color(0xFF2e3192),
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex.value,
            showSelectedLabels: true,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 50,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.house_fill,
                label: 'Home',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.cube_box_fill,
                label: 'My Orders',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.square_list_fill,
                label: 'Prescription',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person_alt_circle_fill,
                label: 'Account',
              ),
            ],
          ),
        );
      },
    );
  }

  _bottomNavigationBarItem({IconData icon, String label}) {
    return BottomNavigationBarItem(
      icon: Icon(icon),
      label: label,
    );
  }
}