Flutter底部导航栏未切换屏幕

Question

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

我在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) {