flutter - 我想使用底部导航栏导航

Question

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

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

如果我使用 Navigation，我必须使用脚手架作为所有小部件的父级，所以是否可以使用脚手架进行导航。

这是我的代码:-

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 Route 机制。
2. GlobalKeys 和 NavigatorState。
3. 了解 Offstage 小部件的幕后工作原理。

你将从这个例子中得到什么:

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

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

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