将底部导航栏的代码与脚手架分开

Question

我只需要将底部导航栏的代码与脚手架分开即可。但问题是当我点击另一个标签切换到另一个页面时，有 7 秒的延迟。

脚手架代码为：

Scaffold(
      extendBody: true,
      body: IndexedStack(
        index: HomeScreen.pageIndex,
        children: [
          HomePage(isMember: widget.isMember),
          (widget.isMember)
              ? const MyOpportunityPage()
              : const AddOpportunity(),
          ProfilePage(isMember: widget.isMember),
        ],
      ),
      bottomNavigationBar: BottomNavBar(
        isMember: widget.isMember,
      ),
    );

底部导航条码为：

class BottomNavBar extends StatelessWidget {
  BottomNavBar({
    Key? key,
    required this.isMember,
  }) : super(key: key);
  bool isMember;
  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (context, StateSetter setState) {
        return BottomNavigationBar(
              currentIndex: HomeScreen.pageIndex,
              onTap: (int value) => setState(() {
                HomeScreen.pageIndex = value;
              }),
              type: BottomNavigationBarType.fixed,
              elevation: 2,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'home'.tr,
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.flag_sharp),
                  label:isMember
                      ? 'my_opportunities'.tr
                      : "add_opportunity".tr,
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'profile'.tr,
                ),
              ],
        );
      }
    );
  }
}

Answer 1

我不确定你为什么有 7 秒的延迟，尤其是当你没有指定时，也许你应该先关闭你的程序并可能卸载它并重新启动你的 IDE 然后再试一次，如果情况仍然如此，您可以像这样重构您的代码；

Scaffold(
        body: IndexedStack(
          index: currentIndex,
          children: [
            Center(child: MyHomeWidget()),
            Center(child: AnotherWidget()),
            Center(child: SomeOtherWidget()),
          ],
        ),
        bottomNavigationBar: BottomNavBar(
          isMember: isMember,
          currentI: currentIndex,
          onPress: (int value) => setState(() {
            currentIndex = value;
          }),
        ),
      ),

class BottomNavBar extends StatelessWidget {
  const BottomNavBar({
    Key? key,
    required this.isMember,
    required this.onPress,
    this.currentI = 0,
  }) : super(key: key);
  final bool isMember;
  final Function(int) onPress;
  final int currentI;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentI,
      onTap: onPress,
      type: BottomNavigationBarType.fixed,
      elevation: 2,
      items: [
        const BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'home',
        ),
        BottomNavigationBarItem(
          icon: const Icon(Icons.flag_sharp),
          label: isMember ? 'my_opportunities' : "add_opportunity",
        ),
        const BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'profile',
        ),
      ],
    );
  }
}

希望会有不同。只需实现您自己的索引和代码的任何其他重要部分。我在 dartpad 上测试过，效果很好，here is a link

将底部导航栏的代码与脚手架分开

separate the code of bottom navigation bar from the scaffold

flutter

flutter-bottomnavigation