Flutter学习笔记-仿闲鱼底部导航栏带有中间凸起图标

霸图镇楼

仿闲鱼底部导航栏带有中间凸起图标

作者：小码农沐枫

链接：https://juejin.im/post/5b5c1b24e51d4519520e90ea

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现

Demo地址 : https://github.com/hanlin19900610/flutter_bottom_navigation_bar

要实现的效果如图

好的,下面开始上代码了:

一. 在main.dart文件中,定义APP的入口信息

二. 我们需要定义三个页面,功能类似Android的Fragment,分别为HomePage.dart, AssistantPage.dart,MinePage.dart, 这三个页面的代码很简单:

这个三个页面的代码都一样就没有都贴出来

三.现在我们就需要去创建我们的主页了,"MainPage.dart"文件

第一步,我们先去实现一个最简单的底部导航栏

在MainPage.dart中我们用到了几个控件:1. PageView : 此控件类似Android的ViewPager,把之前创建的3个页面一次添加进去,之后需要给PageView设置一个控制器-PageController,给PageView设置一个onPageChanged页面切换监听方法,此方法的功能类似与Android中ViewPager中的OnPageChangeListener里的监听方法2. BottomNavigationBar :此控件主要用于配置底部导航栏,详细用法请参见官方文档,在此控件的使用中,我们需要设置三个属性,

items: 添加底部导航栏的每个Item

onTap: 为底部导航栏设置点击事件

currentIndex: 为底部导航设置当前选中项

3. BottomNavigationBarItem: 此控件是底部导航栏的Item至此,我们实现了最基本的底部导航栏的实现,效果图如下:

四.我们要实现仿闲鱼的底部导航栏,需要重构一下底部导航栏,重构方案:1.把中间的文字去掉2.在BottomNavigationBar控件的中上的位置放入一个图片3.重构底部导航的事件方法4.禁止PageView的滑动事件现在开始重构:1.要在BottomNavigationBar上面覆盖一个图片,我们需要用到一个布局Widget---Stack,类似于Framelayout

重构完成之后,效果图如下,我们发现这并不是我们想要的,底部导航栏我们是实现了,但是PageView被遮盖了

PageView被遮盖的解决办法,我们给Stack添加一个可以指定高度的父级--Container,修改的代码如下:

然后我们需要禁止PageView的滑动,我们只需要在给PageView设置一个属性就好了

在运行Flutter项目的时候出现了一个问题,运行时会出现一段时间的白屏,解决办法:

解决方案很简单，Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决，而 Flutter 也是基于此办法，同时优化了 Flutter 初始化阶段的白屏问题（覆盖一个launchView），只用两步设置便能解决 Flutter 中白屏问题。

在项目的 android/app/src/main/res/mipmap-xhdpi/ 目录下添加闪屏图片；

打开 android/app/src/main/res/drawable/launch_background.xml 文件，这个文件就是闪屏的背景文件，具体如何设置可以查阅 Android Drawable，我在 demo 中的设置如下：

如此一来,我们就完成了,文章开始提出的需求了.

Demo地址 : https://github.com/hanlin19900610/flutter_bottom_navigation_bar

刚开始接触Flutter,代码写的有些混乱,可能有些问题考虑不是很深入,有不足之处,还请各位大佬指出