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

if (index!= 1) {});//添加图片的点击事件onTap(1);});});重构完成之后,效果图如下,我们发现这并不是我们想要的,底部导航栏我们是实现了,但是PageView被遮盖了。

2301_82241647

990人浏览 · 2024-04-06 21:14:02

2301_82241647 · 2024-04-06 21:14:02 发布

void onTap(int index) {
if (index != 1) {
setState(() {
this.bigImg = ‘images/home_green.png’;
});
}
pageController.animateToPage(index,
duration: const Duration(milliseconds: 300), curve: Curves.ease);
}

//添加图片的点击事件
void onBigImgTap() {
setState(() {
this.page = 1;
this.bigImg = ‘images/icon_home.png’;
onTap(1);
});
}

void onPageChanged(int page) {
setState(() {
this.page = page;
});
}
}

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

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

bottomNavigationBar: Container(
height: 100.0,
child: Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text(‘首页’)),
BottomNavigationBarItem(
icon: Icon(Icons.accessibility_new), title: Text(‘’)),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text(‘我的’)),
],
onTap: onTap,
currentIndex: page,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: InkWell(
child: new Image.asset(
bigImg,
width: 80.0,
height: 80.0,
),
onTap: onBigImgTap,
),
)),
],
),
)

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

physics: NeverScrollableScrollPhysics(),

在运行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 中的设置如下：

<?xml version="1.0" encoding="utf-8"?>

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

源码链接:

github.com/hanlin19900…

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

感谢GitHub上大佬提出的问题, 解决办法如下

//Stack里面包裹两个组件: Scaffold 和 FloatingActionButtonhome: Stack(
children: [
//Scaffold里面按照之前的写法body->PageView,bottomNavigationBar直接使用BottomNavigationBar
Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
children: [
new HomePage(),
new AssistantPage(),
new MinePage()
],
controller: pageController,
onPageChanged: onPageChanged,
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text(‘首页’)),
BottomNavigationBarItem(
icon: Icon(Icons.assessment), title: Text(‘发布’)),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text(‘我的’)),
],
onTap: onTap,
currentIndex: page,
),
),
//在整个界面的上层放一个FloatingActionButton 组件,位置在底部居中
Align(
child: Padding(
padding: const EdgeInsets.only(bottom: 30.0),
child: FloatingActionButton(
child: new Image.asset(bigImg),
onPressed: onBigImgTap,
),
),
alignment: Alignment.bottomCenter,
),
],
)

学习福利

【Android 详细知识点思维脑图（技能树）】

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。

这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。

由于篇幅有限，这里以图片的形式给大家展示一小部分。

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

b71ac0)

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter 三方库 video_player 的 OpenHarmony 鸿蒙化适配实践

本文介绍了Flutter视频播放插件video_player在OpenHarmony平台上的适配实践。主要内容包括：1）创建Flutter-OH项目并集成video_player依赖；2）核心功能实现，如视频控制器创建、初始化、播放控制和状态监听；3）完整示例应用展示，包含播放/暂停、音量调节、视频切换等功能。