[英]Why doesn't BottomNavigatorBarItem currentIndex get updated?
I am new to flutter and I did find similar questions on SO but am too novice to understand the nuance so apologies if this question is too similar to an already asked one.我是 flutter 的新手,我确实在 SO 上发现了类似的问题,但我太新手了,无法理解其中的细微差别,所以如果这个问题与已经提出的问题太相似,我深表歉意。
I have a BottomNavigationBar
which has 3 icons (Home, Play and Create) which should navigate between these 3 routes/pages.我有一个BottomNavigationBar
,它有 3 个图标(Home、Play 和 Create),它们应该在这 3 个路由/页面之间导航。
main.dart主要.dart
routes: {
"/home": (context) => MyHomePage(title: "STFU"),
"/play": (context) => Play(),
"/create": (context) => Create(),
"/settings": (context) => Settings(),
},
I extracted my navbar into a custom class so my 3 separate pages could use it:我将导航栏提取到一个自定义的 class 中,这样我的 3 个独立页面就可以使用它了:
bottom-nav.dart底部导航.dart
class MyBottomNavBar extends StatefulWidget {
MyBottomNavBar({
Key? key,
}) : super(key: key);
@override
State<MyBottomNavBar> createState() => _MyBottomNavBarState();
}
class _MyBottomNavBarState extends State<MyBottomNavBar> {
int _selectedIndex = 0;
void _onTapped(int index) => {
print("_onTapped called with index = $index"),
setState(
() => _selectedIndex = index,
)
};
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
backgroundColor: Colors.orangeAccent[100],
currentIndex: _selectedIndex,
onTap: (value) => {
print("value is $value"),
// find index and push that
_onTapped(value),
if (value == 0)
{Navigator.pushNamed(context, "/home")}
else if (value == 1)
{Navigator.pushNamed(context, "/play")}
else if (value == 2)
{Navigator.pushNamed(context, "/create")}
},
items: [
BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home_filled)),
BottomNavigationBarItem(
label: "Play", icon: Icon(Icons.play_arrow_rounded)),
BottomNavigationBarItem(label: "Create", icon: Icon(Icons.create)),
],
);
}
}
so now i just set this MyBottomNavBar
class to the bottomNavigationBar
property of the Scaffold widget my inside Home page, Play page and Create page for eg.所以现在我只是将这个MyBottomNavBar
class 设置为脚手架小部件的bottomNavigationBar
属性我的内部主页,播放页面和创建页面,例如。
home.dart家.dart
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Column(
children: [
Container(
padding: EdgeInsets.all(20.00),
child: Text("inside home"),
),
],
),
bottomNavigationBar: MyBottomNavBar(),
);
}
}
play.dart播放.dart
class Play extends StatefulWidget {
const Play({super.key});
@override
State<Play> createState() => _PlayState();
}
class _PlayState extends State<Play> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("inside play page"),
SizedBox(
height: 30.00,
),
Text("some text"),
],
),
),
bottomNavigationBar: MyBottomNavBar(),
);
}
}
The nav bar buttons work to switch between pages but for some reason the currentIndex
value isn't getting updated and stays at 0 (ie on the "Home" icon).导航栏按钮用于在页面之间切换,但由于某种原因, currentIndex
值未更新并保持为 0(即在“主页”图标上)。 When I debug it I can see _selectedIndex
getting updated inside inside the _onTapped
function which should update the currentIndex value but it doesn't appear to do so.当我调试它时,我可以看到_selectedIndex
在_onTapped
function 内部得到更新,它应该更新 currentIndex 值,但它似乎没有这样做。 Any help would be appreciated任何帮助,将不胜感激
What you have here is three different pages with their separate BottomNavBar class instance.您在这里拥有的是三个不同的页面,它们具有单独的 BottomNavBar class 实例。 Instead you should have a shared Scaffold and one bottomNavBar so that when you navigate bottomNavbar state does not reset.相反,您应该有一个共享的脚手架和一个 bottomNavBar,这样当您导航 bottomNavbar state 时不会重置。
You can use PageView to do this.您可以使用 PageView 来执行此操作。
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
List<Widget> pages = const [Home(), Play(), Create()];
final _pageController = PageController();
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (index) {
_pageController.jumpToPage(index);
_selectedIndex = index;
setState(() {});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.play_arrow), label: 'Play'),
BottomNavigationBarItem(icon: Icon(Icons.create), label: 'Create'),
],
backgroundColor: Colors.greenAccent,
),
body: PageView(
controller: _pageController,
children: pages,
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.