如何在颤动的底部导航栏的一部分中导航多个页面答案

【问题标题】：How to navigate through multiple pages in one part of the bottom navigation bar in flutter如何在颤动的底部导航栏的一部分中导航多个页面
【发布时间】：2022-09-27 13:25:18
【问题描述】：

我正在尝试为颤振应用程序实现设计。如何实现一个 Flutter 应用程序，该应用程序保留在导航栏的该部分而不完全转到另一个页面，并且它堆叠在导航堆栈上，因此当我按下返回时它可以返回。我将不胜感激对此的良好反馈

这是我迄今为止为包含底部导航页面和其他屏幕的屏幕的代码

import \'package:flutter/cupertino.dart\';
import \'package:flutter/material.dart\';
import \'package:iconly/iconly.dart\';
import \'package:scree/Screens/DashboardScreens/analytics_screen.dart\';

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

  @override
 _BottomNavBarScreenState createState() => _BottomNavBarScreenState();
}

class _BottomNavBarScreenState extends State<BottomNavBarScreen> {
  final List _screens = [
Scaffold(
  body: Center(
    child: Text(\'A\'),
  ),
),
AnalyticsScreen(),
Scaffold(
  body: Center(
    child: Text(\'C\'),
  ),
),
Scaffold(
  body: Center(
    child: Text(\'D\'),
  ),
),
];
var currentIndex = 0;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;

return Scaffold(
  body: _screens[currentIndex],
  bottomNavigationBar: Container(
    height: size.width * .155,
    decoration: BoxDecoration(
      color: Colors.white,
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.min,
      children: [0, 1, 2, 3]
          .map(
            (index) => InkWell(
              onTap: () {
                setState(
                  () {
                    currentIndex = index;
                  },
                );
              },
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  AnimatedContainer(
                    duration: Duration(milliseconds: 1500),
                    curve: Curves.fastLinearToSlowEaseIn,
                    margin: EdgeInsets.only(
                      bottom: index == currentIndex ? 0 : size.width * .029,
                      right: size.width * .0422,
                      left: size.width * .0422,
                    ),
                    width: size.width * .128,
                    height: index == currentIndex ? 4 : 0,
                    decoration: BoxDecoration(
                      color: Color(0xff25307e),
                    ),
                  ),
                  Icon(
                    index == currentIndex
                        ? listOfIconsBold[index]
                        : listOfIconsLight[index],
                    size: size.width * .076,
                    color: index == currentIndex
                        ? Color(0xff25307e)
                        : Colors.black38,
                  ),
                  Text(
                    listOfText[index],
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                      color: index == currentIndex
                          ? Color(0xff25307e)
                          : Colors.black38,
                    ),
                  ),
                ],
              ),
            ),
          )
          .toList(),
    ),
  ),
);
}

List<IconData> listOfIconsLight = [
IconlyLight.category,
IconlyLight.chart,
IconlyLight.document,
IconlyLight.work
 ];
 List<IconData> listOfIconsBold = [
IconlyBold.category,
IconlyBold.chart,
IconlyBold.document,
IconlyBold.work
 ];

 List<String> listOfText = [\'DashBoard\', \'Analytics\', \'My Products\', \'Manage\'];
}

您可以使用嵌套导航来执行此操作。 docs.flutter.dev/cookbook/effects/nested-nav

标签： flutter dart flutter-navigation flutter-bottomnavigation

【解决方案1】：

您可以使用 Cupertino 底部导航栏，而不是使用普通的底部导航栏。在这个底部导航栏停留在整个应用程序中

【讨论】：