Flutter底部导航栏不切换屏幕

Question

我是颤振新手，这是我第一次在我的一个项目中实现底部导航栏，但我很困惑为什么它不允许我切换屏幕。不知何故，我可以点击图标，但点击时不会切换页面。

我在 Youtube 的一个教程中得到了这段代码，从视频来看它似乎运行良好。

class NavBar extends StatefulWidget {
  static const String route = 'navbar';
  const NavBar({Key? key}) : super(key: key);

  @override
  State<NavBar> createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  @override
  Widget build(BuildContext context) {
    int pageIndex = 0;
    final AuthController auth = locator<AuthController>();

    final List<Widget> pages = [
      const HomeScreen(),
      const ArtistsScreen(),
      const ChatHomeScreen(),
      const ProfileScreen(),
    ];

    return Scaffold(
      body: pages[pageIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: const Color(0xffE28D00),
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white70,
        currentIndex: pageIndex,
        elevation: 3,
        showUnselectedLabels: false,
        onTap: (int index) {
          setState(() {
            pageIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.house),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.music),
            label: 'Artists Hub',
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.comment),
            label: 'Chat',
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.user),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

Answer 1

放在pageIndex构建方法之前。否则，当状态改变时，构建方法调用并设置pageIndex =0

  int pageIndex = 0;
  final List<Widget> pages = [
    const Text("A"),
    const Text("Ab"),
    const Text("As"),
    const Text("Ac"),
  ];

  @override
  Widget build(BuildContext context) {