用户登录

🎉 8 周年订阅优惠

下面我们要把设计草图里的这个底部的导航栏在应用里实现出来,这个导航栏很简单,就是三个小图标,点按小图标可以打开对应的页面。

这个底部导航栏,可以把它放在 App 小部件的 home 属性里用的的这个 Scaffold 小部件里面,给这个小部件添加一个 bottomNavigationBar 属性,它的值就是要在界面底部导航栏上位置上显示的一个小部件。

这里可以使用一个自定义的小部件,名字是 AppBottomNavigationBar, 然后在项目的 lib/src 下面,新建一个文件,放在 widgets 里面,名字叫 app_bottom_navigation_bar.dart。

在这个文件里添加一个 StatefulWidget ,名字是 AppBottomNavigationBar ,然后选中它实施的这个 StatefulWidget, command + . 选择导入 material.dart。

回到 App 小部件,选中 AppBottomNavigationBar,command + . 然后选择导入刚才我们创建的这个小部件。

再回到这个小部件继续编辑一下,这里可以用一下 Flutter 自带的 BottomNavigationBar 小部件,这个小部件里的东西就是一组导航项目,添加一个 items 属性,它的值是一组 BottomNavigationBarItem 小部件。

添加一个 BottomNavigationBarItem 小部件,在它里面先用 icon 属性设置一下项目的小图标,一个 Icon ,设置一下具体要使用的小图标,Icons.change_history ,然后可以用 size 设置一下小图标的大小,设置成 32 。

导航项目除了小图标还得再添加一个标签文字,添加一个 title,它的值用一个 Text 小部件,文字是 首页。

底部导航栏上需要三个这样的导航项目,再复制一份这个 BottomNavigationBarItem ,修改一下这个项目用的小图标,Icons.add ,再修改一下项目的标签文字, 添加。

再复制一份这个导航项目,项目用的小图标是 Icons.account_circle。 标签文字是 帐户。

现在你会发现,在应用界面的底部就会有一组导航项目。 现在每个项目的下面会有标签文字,如果你不想显示这些标签文字,可以再配置一下这个 BottomNavigationBar 小部件,把 showSelectedLabels 属性设置成 false,再把 showUnselectedLabels 属性的值也设置成 false。

这样导航项目下面的标签文字就不见了。

底部导航栏(BottomNavigationBar )《 Flutter 应用案例: 框架 》

统计

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

社会化网络

关于

微信订阅号

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