用户登录

在 App 小部件的状态类里面,先声明一个表示底部导航栏当前项目的属性,类型是 int ,名字是 currentAppBottomNavigationBarItem ,默认值可以是 0,这样默认第一个底部导航栏项目就会是活动状态。

下面再定义一个点按底部导航栏的事件处理,定义一个函数,名字是 onTapAppBottomNavigationBarItem,接收一个 int 类型的参数,名字可以叫 index,这个参数的值就是当前被按的项目的索引号。

在这个函数里面可以执行一下 flutter 提供的 setState 设置一下应用的状态,给它提供一个函数参数,在这个函数参数里面,设置一下 currentAppBottomNavigationBarItem 这个属性的值,让它等于 index,也就是当前被按的项目的索引号 。

应用的状态发生变化以后,flutter 会重建应用的界面。

下面找到 BottomNavigationBar ,在这个小部件里面,用 currentIndex 参数设置一下当前项目的索引,值可以是 currentAppBottomNavigationBarItem。 然后再设置一下 onTap 参数的值,设置成 onTapAppBottomNavigationBarItem。

在模拟器测试一下,点按底部导航栏上的项目,当前被按的项目会变成激活状态,因为点按项目以后,会在 setState 里面修改表示当前激活状态的底部导航栏项目的那个索引值数据,也就是 currentAppBottomNavigationBarItem,flutter 重建应用的界面以后,被点的这个项目就会变成激活状态。

点按底部导航栏项目切换当前活动项目《 Flutter 2:页面结构 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点