android-studio - 我想使用我在下面制作的导航栏更改我的 flutter 应用程序的屏幕

Question

我学习了如何在 Youtube 上为我的应用程序制作此导航栏，但我正在努力实现从其他在线教程到我创建的导航栏的导航和路由。
如下所示，我创建了底部导航栏并将其命名为 BottomNavyBar() .当我按下每个图标时，我希望它转到一个由单独的 dart 文件制成的新屏幕，以显示每个图标都转到一条新路线。

        import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  double xOffset = 0;
  double yOffset = 0;
  double scaleFactor = 1;

  bool isDrawerOpen = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(microseconds: 250),
      transform: Matrix4.translationValues(xOffset, yOffset, 0)
        ..scale(scaleFactor),
      child: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Align(
                  alignment: Alignment.topCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      isDrawerOpen
                          ? IconButton(
                              icon: Icon(Icons.arrow_back_ios),
                              onPressed: () {
                                setState(() {
                                  xOffset = 0;
                                  yOffset = 0;
                                  scaleFactor = 1;
                                  isDrawerOpen = false;
                                });
                              },
                            )
                          : IconButton(
                              icon: Icon(Icons.menu),
                              onPressed: () {
                                setState(() {
                                  xOffset = 230;
                                  yOffset = 150;
                                  scaleFactor = 0.6;
                                  isDrawerOpen = true;
                                });
                              },
                            ),
                      Text(
                        'nghbrly',
                        style: GoogleFonts.quicksand(
                            color: const Color(0xff8fc6bb), fontSize: 45),
                      ),
                      Image(image: AssetImage('assets/images/letterbox.png')),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavyBar(),
      ),
    );
  }
}

class NghbrlySideMenu extends StatefulWidget {
  @override
  _NghbrlySideMenuState createState() => _NghbrlySideMenuState();
}

class _NghbrlySideMenuState extends State<NghbrlySideMenu> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class BottomNavyBar extends StatefulWidget {
  @override
  _BottomNavyBarState createState() => _BottomNavyBarState();
}

class _BottomNavyBarState extends State<BottomNavyBar> {
  int selectedIndex = 0;
  Color backgroundColor = Colors.white;

  List<NavigationItem> items = [
    NavigationItem(
        Icon(
          const IconData(0xe904, fontFamily: 'nghbrly'),
        ),
        Text('  Borrow')),
    NavigationItem(
        Icon(
          const IconData(0xe9c8, fontFamily: 'nghbrlyfullicons'),
        ),
        Text('    Lend')),
    NavigationItem(
        Icon(
          const IconData(0xe97a, fontFamily: 'nghbrlyfullicons'),
        ),
        Text(' Favorites')),
    NavigationItem(
        Icon(
          const IconData(0xe996, fontFamily: 'nghbrlyfullicons'),
        ),
        Text(' Nghbrs')),
    NavigationItem(
        Icon(
          const IconData(0xe9cc, fontFamily: 'nghbrlyfullicons'),
        ),
        Text('   Cart')),
  ];

  Widget _buildItem(NavigationItem item, bool isSelected) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 270),
      height: double.maxFinite,
      width: isSelected ? 125 : 50,
      padding: isSelected
          ? EdgeInsets.only(left: 16, right: 16)
          : EdgeInsets.only(left: 13, right: 8),
      decoration: isSelected
          ? BoxDecoration(
              color: const Color(0xff8fc6bb),
              borderRadius: BorderRadius.all(Radius.circular(50)))
          : null,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              IconTheme(
                data: IconThemeData(
                  size: 24,
                  color: isSelected ? backgroundColor : const Color(0xff655454),
                ),
                child: item.icon,
              ),
              Padding(
                padding: const EdgeInsets.only(left: 5),
                child: isSelected
                    ? DefaultTextStyle.merge(
                        style: TextStyle(
                          color: backgroundColor,
                        ),
                        child: item.title)
                    : Container(),
              )
            ],
          )
        ],
      ),
    );
  }

  //int _currentIndex = 0;
  //final List<Widget> _children = [];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: true,
      child: Container(
        height: 56,
        padding: EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
        decoration: BoxDecoration(color: backgroundColor, boxShadow: [
          BoxShadow(
            color: Colors.white,
            blurRadius: 0,
          )
        ]),
        width: MediaQuery.of(context).size.width,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: items.map((item) {
            var itemIndex = items.indexOf(item);

            return GestureDetector(
              onTap: () {
                setState(() {
                  selectedIndex = itemIndex;
                });
              },
              child: _buildItem(item, selectedIndex == itemIndex),
            );
          }).toList(),
        ),
      ),
    );
  }
}

如果可能的话，我想知道的另一件事是，如果我想将导航栏放在应用标题“nghbrly”下方，就像这张图片 .我真的很感激。

Answer 1

使用此插件 Presistant_bottom_nav_bar .您可以在每个页面中使用底部导航栏。您也可以在链接上方的特定屏幕结帐中禁用底部导航
在我看来这是非常好的插件。此链接中的checkout导航样式。您可以更改底部导航栏navBarStyle的设计:NavBarStyle.style9，只需将style9更改为插件提供的任何数字即可。我相信其中 15 个可用
您可以使用自定义图标代替默认图标，也可以代替此 CupertinoColors.systemPurple，您也可以使用 Colors.red 这样的让我知道它是否有效

PersistentTabController _controller =PersistentTabController(initialIndex: 0);

//Screens for each nav items.
  List<Widget> _NavScreens() {
    return [
     Screen1(),
     Screen2(),
     Screen3(),
      Screen4(),
      
    ];
  }


  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
       icon: Icon(Icons.home),
        title: ("Borrow"),
        activeColor: CupertinoColors.activeBlue,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.favorite),
        title: ("Lend"),
        activeColor: CupertinoColors.activeGreen,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.person_pin),
        title: ("Favorites"),
        activeColor: CupertinoColors.systemRed,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.local_activity),
        title: ("Cart"),
        activeColor: CupertinoColors.systemIndigo,
        inactiveColor: CupertinoColors.systemGrey,
      ),

    ];
  }
@override
Widget build(BuildContext context) {
    return Center(
      child: PersistentTabView(
        controller: _controller,
        screens: _NavScreens(),
        items: _navBarsItems(),
        confineInSafeArea: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        resizeToAvoidBottomInset: true,
        hideNavigationBarWhenKeyboardShows: true,
        decoration: NavBarDecoration(
          borderRadius: BorderRadius.circular(10.0),
        ),
        popAllScreensOnTapOfSelectedTab: true,
        navBarStyle: NavBarStyle.style9,
      ),
    );
}