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

Posted 2023-03-07

【中文标题】将底部导航栏的代码与脚手架分离

【英文标题】：separate the code of bottom navigation bar from the scaffold

【发布时间】：2021-12-20 10:38:19

【问题描述】：

我只需要将底部导航栏的代码与脚手架分开即可。但问题是当我单击另一个选项卡切换到另一个页面时，会有 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,
                ),
              ],
        );
      
    );
  

【参考方案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

【讨论】：

我更改的一个主要内容是，我没有使用StatefulBuider 来访问setState，而是将其替换为回调函数。 Scaffold 所在的 Widget 树是 StatefulWidget。

您的解决方案按预期工作，非常感谢@davidn