所以我最近在 flutter 中开始了我的第一个项目,我完成了完整的 UI 布局,现在正在做前端的整个逻辑部分,我的大部分 onTap 行为都在工作,但是我遇到了以下情况不知道怎么解决。
我有四个包含所有 UI 的文件。
widget0.dart
widget1.dart
widget2.dart
这些文件每个都包含由 BottomNavigationBar 构建的 StatefullWidget。
main.dart
该文件包含我的 main() =>runApp 类和函数。我的 MaterialApp 包含一个带有 BottomNavigationBar 的脚手架。这按预期工作,我能够在 3 个小部件中的每一个之间切换。
但是在我的 widget0.dart 文件中我有一个按钮,它应该将我的 main.dart 文件中 BottomNavigationBar 的索引从 0 更改为 2(以从 widget2.dart 构建小部件)。
我试图将保存导航栏索引的值包装在一个单独的静态类中,因此我可以在按钮中 setState((){ StaticClass.index = 2})
onTap(),但这不起作用,实际上将导航栏卡住为其初始值。
stackoverflow 上某处的回答建议每个小部件都应该有自己的脚手架和导航栏,但我相信必须有更简洁的方法。
那么实现我的目标的最 Fluttery 方式是什么?
提前致谢。
最佳答案
您可以将函数作为参数传递给 widget0,并且在该函数中可以像这样更改索引值:
class ParentWidgetState extends State<ParentWidget> {
int _index = 0;
void goToWidget2() {
setState(() {
_index = 2;
});
}
Widget body() {
switch(_index) {
case 0:
return Widget0(goToWidget2);
case 1:
return Widget1();
case 2:
return Widget2();
}
return Container();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: body(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _index,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
),
],
),
);
}
}
class Widget0 extends StatelessWidget {
Widget0(this.goToWidget2);
final void Function() goToWidget2;
@override
Widget build(BuildContext context) {
return Center(child: FlatButton(
onPressed: goToWidget2,
child: Text("Go To Widget 2"),
),);
}
}
class Widget1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("widget 1"),);
}
}
class Widget2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("widget 2"),);
}
}
关于user-interface - Flutter 如何从子小部件更改父 BottomNavigationBar 索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54585166/