flutter - Flutter 自定义导航栏
问题描述
我有一个自定义导航栏的问题。我无法更改正文中的页面。我放了 4 个不同的文本进行测试。后来我想拥有带有不同页面的 somo 小部件。_buildItem 位于不同的小部件中,但位于同一页面中。
class InicioPage extends StatefulWidget {
final int selectedIndex = 0;
@override
State<StatefulWidget> createState() {
return InicioPageState(selectedIndex);
}
}
class InicioPageState extends State<InicioPage> {
int selectedIndex;
InicioPageState(this.selectedIndex);
final pages = [Text('page 0'),Text('page 1'), ];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1,
title: Text('Title of App'), ),
bottomNavigationBar: BottomNavBar(selectedIndex),
body: pages[selectedIndex], ); } }
这是导航栏。我剪掉了一些不重要的部分,因为角色。
class BottomNavBar extends StatefulWidget {
final int selectedIndex;
BottomNavBar(this.selectedIndex);
@override
State<StatefulWidget> createState() {
return BottomNavBarState(selectedIndex);
},}
class BottomNavBarState extends State<BottomNavBar> {
int selectedIndex;
BottomNavBarState(this.selectedIndex);
List<NavigationItem> items = [
NavigationItem(Icon(Icons.home), Text('Home')),
NavigationItem(Icon(Icons.location_city), Text('Props')),
];
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: items.map((item) { var itemIndex = items.indexOf(item);
return GestureDetector( onTap: () { setState(() {
selectedIndex = itemIndex;
}); },
child: _buildItem(item, selectedIndex == itemIndex),
);
}).toList(),
));
}
}
解决方案
不要通过构造函数在您的 BottomNavBarState 中传递参数,只需使用
widget.selectedIndex
推荐阅读
- python - 使用 xampp 运行 python 烧瓶应用程序时出现错误 500
- python-3.x - pyscipopt,非线性方程组,代码正在运行,但速度慢,无法扩展
- javascript - 非图像 div 上的无限垂直滚动
- c++ - C语言十六进制常量格式
- css - 元素填充顶部/底部占当前高度的百分比
- iot - iot gprs 向 ggogle 助手发送事件并触发推送意图以启动完整对话 -> 一般指导
- oracle - Docker:Oracle 数据库 18.4.0 XE 想在启动时配置一个新数据库
- php - Laravel 适用于我域中的两个文件夹
- excel - 如何将数组发布到不同的工作表?
- java - 如何识别正则表达式中没有空格的两个标记?