我想使用底部导航栏进行导航

Question

我有 flutter 应用程序，在我的应用程序中我必须显示每个页面的底部导航栏

我很困惑我应该使用底部导航栏进行导航还是必须为每个页面添加底部导航栏

如果我使用导航，我必须使用脚手架作为所有小部件的父级，那么有什么方法可以使用脚手架进行导航。

这是我的代码：-

class WorkerHomeScreen extends StatelessWidget {
  WorkerHomeScreen({Key? key}) : super(key: key);
  int _selectedPageIndex = 0;

  List<Map<String, dynamic>> get _pages {
    return [
      {"page": SignInScreen(), "name": "PROPERTY", "action": null},
      {
        "page": ChoseRoleScreen(),
        "name": "CHAT",
        "action": ["Search"]
      },
      {"page": LandingPage(), "name": "VIDEO", "action": null},
      {"page": EmployerSignUpScreen(), "name": "PROFILE", "action": null}
    ];
  }

  void _selectPage(int index) {
    _selectedPageIndex = index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
      ),
      body: _pages[_selectedPageIndex]["page"],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: _selectPage,
        currentIndex: _selectedPageIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(workerNavigationLists[0].icon),
            label: "Property",
            activeIcon: Icon(workerNavigationLists[0].icon),
          ),
          BottomNavigationBarItem(
            icon: Icon(workerNavigationLists[1].icon),
            label: "Chat",
            activeIcon: Icon(workerNavigationLists[0].icon),
          ),
          BottomNavigationBarItem(
            icon: Icon(workerNavigationLists[0].icon),
            label: "Video",
          ),
          BottomNavigationBarItem(
            icon: Icon(workerNavigationLists[0].icon),
            label: "Profile",
            activeIcon: Icon(workerNavigationLists[0].icon),
          ),
        ],
      ),
    );
  }
}

这是我的屏幕：-

class SignInMobile extends StatelessWidget {
  SignInMobile({Key? key}) : super(key: key);
  final SignInController signInController = Get.find();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RaisedButton(
          onPressed: () {
             /// I want to navigate to other page but I want navigation bar in other page also
               
             },
          child: Text("TAP TO NAVIGATE"),
        ),
      ),
    );
  }
}

Answer 1

所以从讨论中我创建了一个例子

检查下面的演示链接： https: //github.com/sagaracharya24/bottomApp.git

因此，为了实现此实施，您必须了解以下内容

1. OnGenerate 路由机制。
2. GlobalKeys 和 NavigatorState。
3. 了解 Offstage 小部件在幕后如何工作。

您将从示例中得到什么：

1. 每个页面都根据 BottomBarItem 维护页面堆栈。
2. 如果您深入嵌套页面并单击同一项目，它将删除所有页面并返回主页。

我还添加了示例 Gif 来向您展示该应用程序正在运行。

让我知道它是否适合您，谢谢。