时间戳

首页 > 解决方案 > Flutter - 如何从底部菜单导航栏的第一个标签屏幕打开第二个屏幕

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

问题描述

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

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

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

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

所以我被困在这里。

我的代码片段如下。

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")),
          ]),
);

并且 floatActionButton 在第二个屏幕上设置为顶部。

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

标签： flutterflutter-layout

解决方案

所想的是，您可以将 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',

                ),
              ))

推荐阅读