Flutter Bottom Navigation Bar无法切换页面问题求助

问题出在pageIndex变量的定义位置——你把它放在了build方法内部。每次调用setState触发UI重建时，build方法会重新执行，pageIndex会被重新初始化为0，导致页面始终无法切换。

修改后的代码如下：

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> {
  // 将pageIndex改为类成员变量，避免每次build被重置
  int pageIndex = 0;
  final AuthController auth = locator<AuthController>();

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

  @override
  Widget build(BuildContext context) {
    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',
          ),
        ],
      ),
    );
  }
}

核心修改点：

• 把int pageIndex = 0;从build方法中移出，作为_NavBarState的成员变量，这样状态更新时，变量值会被保留，不会被重置。
• 同时把pages列表移到类成员位置（可选，但更符合状态管理规范，避免每次build重新创建列表）。

内容的提问来源于stack exchange，提问作者Furanzux Pocha