我正在尝试在 flutter 应用程序中实现底部导航栏，但我的源代码中不断出现错误

Question

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

  @override
  State<BottomNavigationBar> createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<BottomNavigationBar> {
  List views = [
    const HomeView(),
    const CurrentLocationView(),
    const ProfileView(),
    const SettingsView()
  ];
  int currentIndex = 0;
  void onTap(int index) {
    currentIndex = index;

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: views[0],
       bottomNavigationBar:const BottomNavigationBar(
        onTap: onTap,
        currentIndex:currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation:0,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(Icons.home_outlined),
          ),
          BottomNavigationBarItem(
            label: 'Map',
            icon: Icon(Icons.map),
          ),
          BottomNavigationBarItem(
            label: 'Settings',
            icon: Icon(Icons.settings),
          ),
          BottomNavigationBarItem(
            label: 'Profile',
            icon: Icon(Icons.person),
          ),
        ],
      ),
    );
  }
}

在 Visual Studio Code 中，它突出显示了以下代码，我将在下面以红色发布，并给出以下错误消息：

名称“onTap”未定义。 尝试将名称更正为现有命名参数名称或使用名称 onTap 定义命名参数

名称“currentIndex”未定义。 尝试将名称更正为现有命名参数名称或使用名称“currentIndex”定义命名参数。

名称“items”未定义。 尝试将名称更正为现有命名参数名称或使用名称“items”定义命名参数。

对于下面的其他六行代码，它给出了相同的错误。

        onTap: onTap,
        currentIndex:currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation:0,
        items: <BottomNavigationBarItem>[

Answer 1

这是因为您定义的 class ( BottomNavigationBar ) 与 Flutter 附带的预建 class 相同。您需要更改它

   import 'package:flutter/material.dart';

class BottomNavigationScreen extends StatefulWidget { ////here, class name should be different from flutter built in classes
  const BottomNavigationScreen({super.key});

  @override
  State<BottomNavigationScreen> createState() => _BottomNavigationScreenState();
}

class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
  List views = [
    const HomeView(),
    const CurrentLocationView(),
    const ProfileView(),
    const SettingsView()
  ];
  int currentIndex = 0;
  void onTap(int index) {
    currentIndex = index;

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: views[0],
       bottomNavigationBar:BottomNavigationBar(
        onTap: onTap,
        currentIndex:currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation:0,
        items: const<BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(Icons.home_outlined),
          ),
          BottomNavigationBarItem(
            label: 'Map',
            icon: Icon(Icons.map),
          ),
          BottomNavigationBarItem(
            label: 'Settings',
            icon: Icon(Icons.settings),
          ),
          BottomNavigationBarItem(
            label: 'Profile',
            icon: Icon(Icons.person),
          ),
        ],
      ),
    );
  }
}

Answer 2

onTap 是一个 Function，它会在用户更改选项卡时返回选定的选项卡索引。它会给出红色错误，因为您尚未定义 onTap function。

使用代码如下，

onTap: (int index) {
      print("selected Tab Index : $index");
      }