用户登录

在页面底部这里会显示一个 BottomNavigationBar,下面我们把它单独放在一个文件里,打开 app.dart,剪切一下 Scaffold 小部件的 bottomNavigationBar 参数的值,这里就是一个 BottomNavigationBar 小部件。

然后新建一个文件,放在 lib/app/components 里面,名字是 app_page_bottom.dart,在这个文件里定义一个小部件,名字叫 AppPageBottom, 把剪切的东西作为这个小部件的 build 方法 return 的东西。

在这个小部件里面要声明两个东西,一个是 int 类型的属性,名字是 currentIndex, 再声明一个方法,类型是 ValueChanged? 名字是 onTap。

添加一个构造方法,AppPageBottom,添加两个参数,this.onTap ,再添加一个 this.currentIndex,默认值是 0 。

修改一下 BottomNavigationBar 小部件的 currentIndex,让 AppPageBotton 小部件里的 currentIndex 属性作为这个参数的值。

再修改一下 onTap 参数,让小部件里的 onTap 作为这个参数的值。

打开 App 小部件,这里可以让 AppPageBottom 作为 Scaffold 小部件的 bottomNavigationBar 参数的值,使用这个小部件可以设置一下它的 currentIndex 参数,对应的值是 currentAppBottomNavigationBarItem,再设置一下它的 onTap,值是 onTapAppBottomNavigationBarItem。

在模拟器再测试一下,点按底部导航栏上的项目,可以切换显示不同的小部件。

定义应用页面底部小部件(AppPageBottom)《 Flutter 2:定义部件 》

统计

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

社会化网络

关于

微信订阅号

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