Flutter - 底部导航栏不起作用

Question

我正在尝试在 Flutter 中使用 BottomNavigationBar。它运作良好。没有错误。但是当我按下底部导航栏上的按钮时，没有任何反应。还要注意控制台底部导航栏没有评论。

import 'package:copy_ems/screen/more_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../my_profile.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  Widget child = Container();
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    switch(_currentIndex) {
      case 0:
        child = const MoreScreen();
        break;

      case 1:
        child = const MoreScreen();
        break;

      case 2:
        child = const MyProfile();
        break;

      case 3:
        child = const MoreScreen();
        break;
    }

    return BottomNavigationBar(
      currentIndex: _currentIndex,
      backgroundColor: Colors.white,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.black87.withOpacity(.60),
      selectedFontSize: 14,
      unselectedFontSize: 14,
      onTap: (value) {
        setState(() => _currentIndex = value,
        );
      },
      items:  const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.archive_rounded),
          label: 'My Feed',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_travel),
          label: 'Leave',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.add_task),
          label: 'Tasks',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.more_horiz),
          label: 'More',
        ),
      ],
    );
  }
}

这段代码有什么问题。谁能帮帮我？

Answer 1

您要导航到BottomNavBar吗？

试试这个Navigator.push(context,MaterialPageRoute(builder: (context)=> BottomNavBar()));

Answer 2

检查此代码我的帮助

import 'package:copy_ems/screen/more_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../my_profile.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _currentIndex = 0;
  static const List<Widget> _widgetOptions = <Widget>[
      MoreScreen(),
      MoreScreen(),
      MyProfile(),
      MoreScreen(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions.elementAt(_currentIndex);
      bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex,
      backgroundColor: Colors.white,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.black87.withOpacity(.60),
      selectedFontSize: 14,
      unselectedFontSize: 14,
      onTap: (value) {
        setState(() => _currentIndex = value);
      },
      items:  const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.archive_rounded),
          label: 'My Feed',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_travel),
          label: 'Leave',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.add_task),
          label: 'Tasks',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.more_horiz),
          label: 'More',
        ),
      ],
    ); 
  }
}

Answer 3

你可以这样使用：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Nev';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: My Feed',
      style: optionStyle,
    ),
    Text(
      'Index 1: Leave',
      style: optionStyle,
    ),
    Text(
      'Index 2: Tasks',
      style: optionStyle,
    ),
     Text(
      'Index 2: More',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'My Feed',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Leave',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Tasks',
          ),
       BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'More',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}