如何解决底部导航栏的导航问题

Question

我使用容器创建了一个底部导航栏 这是它的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:installement1_app/screens/Dashboard.dart';
import 'package:installement1_app/screens/customersScreen.dart';
import 'package:installement1_app/theme/Colors.dart';

class bottomNavBar extends StatefulWidget {
  const bottomNavBar({super.key});

  @override
  State<bottomNavBar> createState() => _bottomNavBarState();
}

class _bottomNavBarState extends State<bottomNavBar> {
  @override
  Widget build(BuildContext context) {
    bool isHomeScreen = false;
    bool isCustomersScreen = false;
    Size size = MediaQuery.of(context).size;
    return Padding(
      padding: EdgeInsets.only(
          left: size.width * 0.04,
          right: size.width * 0.06,
          bottom: size.width * 0.06),
      child: Container(
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(27)),
        height: size.height * 0.07,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: primaryBlue),
              child: IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.add_rounded,
                    color: Colors.white,
                    size: size.width * 0.08,
                  )),
            ),
            IconButton(
              onPressed: () {
                if (!isHomeScreen) {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => DashboardScreen()));
                }
              },
              icon: SvgPicture.asset('assets/images/homeIcon.svg'),
            ),
            IconButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => CustomersScreen()));
              },
              icon: SvgPicture.asset('assets/images/usersIcon.svg'),
            ),
            IconButton(
              onPressed: () {},
              icon: SvgPicture.asset('assets/images/qrCodeIcon.svg'),
            ),
            IconButton(
              onPressed: () {},
              icon: SvgPicture.asset('assets/images/walletIcon.svg'),
            ),
            IconButton(
              onPressed: () {},
              icon: SvgPicture.asset('assets/images/settingsicon.svg'),
            ),
          ],
        ),
      ),
    );
  }
}

现在我已将此小部件传递给底部导航栏

  bottomNavigationBar: const bottomNavBar(),

现在导航按预期工作，我可以在不同页面之间导航， 但是当我在页面上时，假设是客户页面： 应该发生的情况是，当我点击将我导航到我已经在的页面上的按钮时，导航器不应导航，因为我已经在按钮引导的页面上 但就我而言，当我在 CustomerPage 上并点击导致 CustomersPage 的 IconButton 时，导航器会再次导航到同一页面，这意味着我可以看到导航动画 在 BottomAppBar 中，我们可以使用索引和 BottomNavBar 项来控制它，但是如果我使用容器来创建底部导航栏，那会怎么样？

Answer 1

BottomNavigationBar 可以作为解决方案吗？

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

Answer 2

您可以创建一个动态构建图标的函数，然后传递一个 onChange 函数以在按下图标时执行。

您需要创建一个 selectedIndex 的全局变量，它可用于突出显示图标，也可用于检查页面是否已在视图中。

如果 selectedIndex 等于图标按下的索引，则不会执行屏幕更改。

参考下面的代码来解决您的问题。

注意： 这是创建自定义底部导航栏时更高效、更简洁的方法。您也可以使用 LayoutBuilder，但为了简单起见，我使用了这种方法。

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

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key});

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  // ADDED THIS
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    bool isHomeScreen = false;
    bool isCustomersScreen = false;

    Size size = MediaQuery
        .of(context)
        .size;
    return Padding(
      padding: EdgeInsets.only(
          left: size.width * 0.04,
          right: size.width * 0.06,
          bottom: size.width * 0.06),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(27),),
        height: size.height * 0.07,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          // ADDED THIS
          children: buildIcons(),
        ),
      ),
    );
  }

  List<Widget> buildIcons() {
    final list = <Widget>[];

    final icons = <String>[
      // ADD YOU ICON ASSETS HERE
    ];

    for (var index = 0; index <= icons.length; index++) {
      list.add(IconButton(
        onPressed: () => onChange(index),
        icon: SvgPicture.asset(icons[index]),
      ),);
    }

    return list;
  }

  void onChange(int change) {
    if (selectedIndex != change) {
      selectedIndex = change;
      switch (change) {
      // ADD YOUR ROUTING FUNCTIONALITY HERE
      // EXAMPLE
        case 0:
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => DashboardScreen()));
          break;
      }
    }
  }
}