Flutter - 如何从底部菜单导航栏的第一个标签屏幕打开第二个屏幕

Question

我有一个主屏幕，底部标签栏有 4 个栏。现在我关心的是第一个标签栏。

第一个标签栏中显示了不同的类别，例如。正如您在屏幕截图中看到的那样，有 2 个类别：

1) 第 1 类（摩托车越野赛、公路和配件） 2) 热门类别

现在，当我单击任何类别 1 时，我想要底部的标签栏（4 个标签栏），但是当我打开流行类别时，我不想要那个标签栏。

所以我被困在这里了。

下面是我的代码sn-p。

Scaffold(
      backgroundColor: Colors.white,
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: SafeArea(
          top: true,
          child: SizedBox.expand(
            child: PageView(
              physics: new NeverScrollableScrollPhysics(),
              controller: _pageController,
              onPageChanged: (index) {
                setState(() => currentIndex = index);
              },
              children: <Widget>[
                Products(),
                News(),
                Service(),
                Events(),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        elevation: 0,
        child: Image.asset('assets/icons/bottom_center.png'),
        backgroundColor: Colors.transparent,
        focusElevation: 10,
        disabledElevation: 10,
        highlightElevation: 10,
        onPressed: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (BuildContext context) {
            return WorldCategories();
          }));
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) {
            setState(() {
              currentIndex = index;
              _pageController.jumpToPage(index);
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit), title: Text("A")),
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit), title: Text("X")),
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit), title: Text("Y")),
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit), title: Text("Z")),
          ]),
);

并且还在第二个屏幕上设置了浮动操作按钮。

Answer 1

您的想法是您可以将 GestureDetector 用于热门类别文本，然后点击将其重定向到您想要的页面。

 GestureDetector(
              onTap: () async {
              // here you make your navigation for your desired page
         Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => youPage()),
             );
              },
              child: Padding(

                child: Text(
                  'Populat Categoreies',

                ),
              ))

Answer 2

在产品内添加两个布局，当点击 motocross 时隐藏第一个布局并显示 motocross 布局，当点击流行类别时 像

这样进行页面导航

Navigator.push(context,
              MaterialPageRoute(builder: (BuildContext context) {
            return popularCategories();
          }));