flutter 如何从没有底部导航栏的页面导航回底部导航栏

eqqqjvef 于 2022-12-24 发布在 Flutter

关注(0)|答案(2)|浏览(219)

我一直在努力弄清楚如何导航回我的底部导航栏后，导航到一个页面没有它。使用导航弹出不工作，并产生一个错误，我已经看了其他问题，人们问同样的事情，但似乎没有人回答这个问题，每个人都只是解释如何在导航栏内的不同项目之间导航...这很容易。
下面是导航栏的代码，它工作起来没有任何问题。再次，我可以很容易地在不同的导航栏页面之间导航。

`import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:flutter/material.dart';
import '../../Screens/screens_export.dart';

class GoogleNavBar extends StatefulWidget {
  const GoogleNavBar({Key? key}) : super(key: key);

  @override
  State<GoogleNavBar> createState() => _GoogleNavBarState();
}

class _GoogleNavBarState extends State<GoogleNavBar> {
int currentIndex = 2;
final Screens = [
  nderChat(),
  TBD(),
  Reports(),
  Drawer(),
];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Screens[currentIndex],
      bottomNavigationBar: Container(
        color: Colors.black,
        child: Padding(
          padding: const EdgeInsets.symmetric(
           horizontal: 15,
           vertical: 20),
          child: GNav(
            backgroundColor: Colors.black,
            color: Colors.white,
            activeColor: Colors.white,
            tabBackgroundColor: Colors.grey.shade800,
            padding: EdgeInsets.all(16),
            gap: 8,
            onTabChange: (index) => setState(() => currentIndex = index),
            tabs: const[
            GButton(
              icon: Icons.groups_outlined,
              text: 'Global',
            ),
            GButton(
              icon: Icons.rss_feed_outlined,
              text: 'TBD',
              ),
            GButton(
              icon: Icons.running_with_errors_rounded,
              text: 'Alerts',
              ),
            // GButton(
            //   icon: Icons.sports,
            //   text: 'Reports',
            //   ),
            GButton(
              icon: Icons.account_circle_outlined,
              text: 'Profile',
              ),
          ]
          ),
        ),
      ),
    );
  }
}

在屏幕抽屉中，我打开了一个抽屉，这可能不是一个好习惯。单击其中一个抽屉选项会将我带到另一个页面，如个人资料页（不属于导航栏）。
导航到配置文件后，当我做“导航弹出”时，它给我“路线错误”。
我不知道该怎么办，我试过用Pushnamed，但也给了我一个错误，也许是我做错了。
一个类似的问题没有答案：Flutter pass bottom navigation bar selected index when navigating back to page with bottom nav bar

flutter

来源：https://stackoverflow.com/questions/74886251/how-to-navigate-back-to-bottom-navigation-bar-from-a-page-without-bottom-nav-ba

2条答案

按热度按时间

wz3gfoph1#

配置文件页面是一个底部导航。

onWillPop: () async {

    if (_currentIndex != 0) {
      
      setState(() {
        _currentIndex = 0;
      });
      return false;
    } else {
      
    }
    return widget.go_back;
  },

你应该这样使用。（main.dart）

return  WillPopScope(
  onWillPop: () async {
    if (currentIndex != 0) {
      setState(() {
        currentIndex = 0;
      });
      return false;
    } 
  },
  child:Scaffold(

  body: Screens[currentIndex],
  bottomNavigationBar: Container(
    color: Colors.black,
    child: Padding(
      padding: const EdgeInsets.symmetric(
       horizontal: 15,
       vertical: 20),
      child: GNav(
        backgroundColor: Colors.black,
        color: Colors.white,
        activeColor: Colors.white,
        tabBackgroundColor: Colors.grey.shade800,
        padding: EdgeInsets.all(16),
        gap: 8,
        onTabChange: (index) => setState(() => currentIndex = index),
        tabs: const[
        GButton(
          icon: Icons.groups_outlined,
          text: 'Global',
        ),

        GButton(
          icon: Icons.rss_feed_outlined,
          text: 'TBD',
          ),
        GButton(
          icon: Icons.running_with_errors_rounded,
          text: 'Alerts',
          ),
        // GButton(
        //   icon: Icons.sports,
        //   text: 'Reports',
        //   ),
        GButton(
          icon: Icons.account_circle_outlined,
          text: 'Profile',
          ),
      ]
      ),
    ),
  ),
)
);

赞(0）回复(0）举报 2022-12-24

ilmyapht2#

要添加更多信息：

class ModalDrawer extends StatelessWidget {
  const ModalDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double drawerWidth = MediaQuery.of(context).size.width;
    return Drawer(
      width: drawerWidth,
      backgroundColor: Colors.lightBlue,
      child: ListView(
        padding: const EdgeInsets.all(0),
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              // image: DecorationImage(
              //     image: AssetImage("assets/images/city_night.jpg"),
              //        fit: BoxFit.cover)
            ),
            child: UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              accountName: Text(
                "Alpha",
                style: TextStyle(fontSize: 18),
              ),
              accountEmail: Text("alpha@alphamail.com"),
              currentAccountPictureSize: Size.square(50),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text(
                  "A",
                  style: TextStyle(
                      fontSize: 30.0,
                      color: Color.fromARGB(255, 255, 255, 255)),
                ),
              ),
            ),
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.home,
            icon: Icons.home_outlined,
            onClicked: () => selectedItem(context, 0),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.profile,
            icon: Icons.person_outline,
            onClicked: () => selectedItem(context, 1),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.faq,
            icon: Icons.question_mark_outlined,
            onClicked: () => selectedItem(context, 2),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.settings,
            icon: Icons.settings,
            onClicked: () => selectedItem(context, 3),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: 'chat',
            icon: Icons.message_outlined,
            onClicked: () => {
              showDialog(context: context, builder:  (context) => SimpleDialogBox()),
              selectedItem(context, 4),},
            // selectedColor: Colors.white,
          ),
        ],
      ),
    );
  }
//
  Widget buildMenuItem({
    required String text,
    required IconData icon,
    required onClicked,
    // required selectedColor,
    // required selected,
  }) {
    const colorImage = Color.fromARGB(255, 3, 3, 3);
    const colorText = Color.fromARGB(255, 0, 0, 0);

    return Padding(
      padding: const EdgeInsets.only(bottom: 1),
      child: ListTile(
        leading: Icon(icon, color: colorImage),
        title: Text(text, style: const TextStyle(color: colorText)),
        onTap: onClicked,
        // selectedTileColor: selectedColor,
        // selected: selected,
      ),
    );
  }

  void selectedItem(BuildContext context, int index) {
    Navigator.of(context).pop();
    switch (index) {
      case 0:
        Navigator.pushNamed(context, '/home');
        break;
      case 1:
        Navigator.pushNamed(context, '/user');
        break;
      case 2:
        Navigator.pushNamed(context, '/faq');
        break;
      case 3:
        Navigator.pushNamed(context, '/settings');
        break;
      case 4:
      Navigator.pushNamed(context, '/chatscreen');
      break;
    }
  }
}

以下是一些屏幕截图
Profile bar item
Page without Navigation Bar
On pressing back button in top left corner of App Bar

赞(0）回复(0）举报 2022-12-24

我来回答

flutter 如何从没有底部导航栏的页面导航回底部导航栏

2条答案

相关问题

热门标签

最新问答