使用Widgets列表动态更改Scaffold的主体

Question

我有一个小部件列表，它应该作为支架小部件(在Dashboard类中)的主体，根据BottomNavigationBar中的activeIndex，但当activeIndex改变时，主体不更新。

The BottomNavigationBar Code:

class BottomNavBar extends StatefulWidget {
BottomNavBar({Key? key}) : super(key: key);
int activeIndex = 1;
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
final Color primaryColor = Color(0xff2FC4B2);
final Color inactiveIconColor = Colors.white;
final Color activeIconColor = Colors.blue;
void setIndex(int index) {
setState(() {
widget.activeIndex = index;
});
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.track_changes_outlined,
color: inactiveIconColor,
),
activeIcon: Icon(
Icons.track_changes_outlined,
color: activeIconColor,
),
label: "Track"),
BottomNavigationBarItem(
icon: Icon(
Icons.home_outlined,
color: inactiveIconColor,
),
activeIcon: Icon(
Icons.home_outlined,
color: activeIconColor,
),
label: "Home"),
BottomNavigationBarItem(
icon: Icon(
Icons.settings_outlined,
color: inactiveIconColor,
),
activeIcon: Icon(
Icons.settings_outlined,
color: activeIconColor,
),
label: "Settings")
],
backgroundColor: primaryColor,
fixedColor: Colors.white,
showSelectedLabels: false,
showUnselectedLabels: false,
currentIndex: widget.activeIndex,
onTap: setIndex,
);
}
}

Dashboard Code:

class Dashboard extends StatefulWidget {
final String? userID;
final String? userName;
Dashboard(this.userID, this.userName);
@override
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
BottomNavBar navBar = new BottomNavBar();
@override
Widget build(BuildContext context) {
List<Widget> navBarItems = [Track(), Home(widget.userID, widget.userName)];
return Scaffold(
bottomNavigationBar: navBar,
body: navBarItems.elementAt(navBar.activeIndex),
);
}
}

Answer 1

使用bar index state应该是这样的:

class BottomNavBar extends StatefulWidget {
BottomNavBar({Key? key, int initialIndex = 1, required Function onIndexChanged}) : super(key: key);

final int initialIndex;
final Function(int) onIndexChanged;

@override
_BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {

late int activeIndex;

@override
void initState() {
super.initState();
activeIndex = widget.initialIndex;
}

void setIndex(int _index) {
setState(() {
activeIndex = _index;
});
widget.onIndexChanged(activeIndex);
}

@override
Widget build(BuildContext context) {
///other code
currentIndex: activeIndex,
onTap: setIndex,
///other code
}
}

…

class _DashboardState extends State<Dashboard> {
int currentIndex = 0;
@override
Widget build(BuildContext context) {
List<Widget> navBarItems = [Track(), Home(widget.userID, 
widget.userName)];
return Scaffold(
bottomNavigationBar: BottomNavBar(
initialIndex: 1,
onIndexChanged: (int index) {
setState(() {
currentIndex = index;
});
}
),
body: navBarItems.elementAt(currentIndex),
);
}

…

StatefulWidget文档