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

nkoocmlb 于 2023-01-06 发布在 Flutter

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

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代码中，它突出显示下面的代码段（我将在下面用红色标出），并给出以下错误消息：
未定义名称“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>[

flutter

来源：https://stackoverflow.com/questions/75016518/i-am-trying-to-implement-a-bottom-navigation-bar-in-a-flutter-app-but-i-keep-get

2条答案

按热度按时间

nvbavucw1#

onTap是一个函数，当用户更改选项卡时，它会返回选定的选项卡索引。它会显示红色错误，因为您没有定义onTap函数。
使用以下代码，

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

赞(0）回复(0）举报 2023-01-06

hrysbysz2#

这是因为你定义的类（BottomNavigationBar）和Flutter自带的预建类是一样的，你需要改变它

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),
          ),
        ],
      ),
    );
  }
}

赞(0）回复(0）举报 2023-01-06

我来回答

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

2条答案

相关问题

热门标签

最新问答