项目框架及架构
image.png
技术栈：
1.必备技能
- 自定义组件
- 布局技巧
- 扁平化布局
- 调试技巧
- 沉浸式状态栏
- 自定义主题
- Dark Mode
- 依赖冲突
- 构建&打包
Flutter集成与打包Android应用
Flutter集成与打包iOS应用
2.核心原理
- Flutter路由原理剖析
- Flutter渲染原理剖析
- Flutter图片加载与缓存原理剖析
- 组件化原理和方案剖析
- 播放器源码分析
3.网络和存储
- 网络层管理框架
- 请求可配置
- 统一异常和返回处理
- 支持Adapter模式
- 支持拦截器
- 无缝切换http和dio
- Dao层设计
- 统一缓存管理框架hi_cache
4.路由&导航
- 监听路由页面跳转
- 页面级生命周期实现
- 路由页面栈管理
- 未登录拦截
- Android物理返回键兼容处理
- schema跳转
- tabBar切换监听
5.图片&动画
- 主流图片库对比与选择
- 图片缓存
- 动画必备技能
- AnimatedWidget
- AnimatedBuilder
- Tween
- AnimationController
- Animation
- Lottie动效
- 高斯模糊
- 登录动效
- 展开动效
- 视觉差滚动动效
- 弹幕播放动效
6.视频技术
- 主流视频播放器分析
- 播放器组件封装
- 自定义播放器UI
- 播放器交互实现
- 沉浸式播放
- 全屏播放
7.状态管理
- 主流状态管理框架provider、bloc、redux分析
- ProxyProvider、MultiProvider、Consumer
- provider性能优化
8.性能调优
-
界面帧率优化（帧率提升70%）
image.png
- APP包大小瘦身（包大小减少66%）
- 页面秒开
- 内存优化
- build()方法优化
- 列表优化方法
- 图片缓存优化
10.稳定性优化
- 异常捕获与上报
- 测试之道
- 单元测试
- Widget测试
- 集成测试
11.架构技术
组件化方案
-
基于可重用的目的，将一个大型App拆分成多个独立的组件或模块。
- 每一个独立的组件都是一个单独的系统，可以单独维护、升级甚至直接替换，也可以依赖于别的独立组件
- 只要组件提供的功能不发生变化，就不会影响其他软件和软件系统的整体功能
- 组件化的中心思想是将独立的功能进行拆分
-
颗粒度拆分原则
-
单一性原则
- 每个组件仅提供一个功能(分而治之，每个组件都有自己固定的职责，专注做一件事)
- 当你遇到不知道该放哪的代码时，就需要重新思考组件的设计和职责了
-
抽象化原则
- 组件提供的Api应尽量稳定，具有高复用性
- (对外暴露的接口很少发生变化，做好功能抽象和接口设计，把所有可能变化的因子都在组件内做好适配，不要暴露给她它的调用方)
-
稳定性原则
- 不要让稳定的组件依赖不稳定的组件
- 假如：A组件依赖了B组件，如果A组件很稳定，但是B组件经常变化，那么A组件就会跟着B的变化而经常适配从而变得不稳定了
-
自完备性
- 组件要尽可能自给自足，减少对其他底层组件的依赖，达到代码可复用的目的。
- 比如：A组件只是依赖某个大B组件中的某个方法，这是更好的处理方式是：剥离A组件对B组件的依赖，直接把这个方法拷贝到A组件中。
-
单一性原则
-
组件化实施步骤
-
剥离与业务无关的基础功能
- 网络操作
- 本地缓存
- 第三方库封装
- 考虑到后续的维护适配成本，最好再封装一层，使项目不直接依赖外部代码，方便后续更新或替换
- 如：基于flutter_swiper 封装了hi_banner等
- UI组件等
- 将它们封装为独立的基础库后，我们在项目里用pub来管理
-
抽象业务模块
- 登录模块
- 首页模块
- 详情模块
- 排行榜模块等
- 遵循先粗后细，只要能将大体划分清晰的业务组件进行拆分，后续就可以通过分布迭代、局部微调，最终实现整个业务项目的组件化。
-
最小化服务能力
- 根据上面的颗粒度拆分原则修正各个组件下的依赖。以及最小化对外暴露的能力
-
剥离与业务无关的基础功能
Flutter网络层框架hi_net架构
- 对于繁杂的业务网络层所面临的挑战
- 切换成本高:第三方库存在不维护切换成本高的风险
- 接口管理不便:大中型APP接口众多，不方便管理
- 重复代码多：网络操作和业务代码耦合严重，不利于扩展
- 开发效率低：不同三方库使用方式不统一，步骤繁琐开发效率低
- hi_net架构设计
- 1.支持网络库插拔设计，且不干扰业务层
- 2.简单易用，支持配置来进行请求
- 3.Adapter设计，扩展性强
- 4.统一异常和返回处理
image.png
统一缓存管理框架hi_cache架构
- 封装页面框架HiBaseTabState
12.软技能
- 架构思想
- 框架封装和架构搭建的能力
- 优秀框架的封装思路
- 疑难问题解决的方法论
2.快捷键
①AndroidStudio
image.png
②VSCode
image.png
补充
- Flutter布局嵌套过深导致代码可读性变差，通过代码抽取成多个method或widget减少嵌套层级
- 对第三方插件使用: 使用频率较高时对库进行封装，较少对业务代码无侵入，扩展性好
- FractionallySizedBox填满整个宽度
- Flexible填充剩余空间
- 抽取工具类，组件化时方便组件下沉
- 将通用的代码提取成通用的类、方法或组件
- 将Tab组件通用代码拆成HiTab组件实现代码的复用
- 对于视频详情页数据处理
- 默认是从上个视频列表传递过来model
- 数据加载完成后给model重新赋值
- 【用户在列表停留过久时，数据有可能不是最新的】
- 熟悉扁平化布局，減少嵌套地狱实现思路
- 熟悉页面加载优化并能实现页面秒开
- 状态栏样式(前台/后台切换变为白色/黑色)
- 监听App应用的生命周期变化，做兼容处理 didChangeAppLifecycleState
列表图片的优化：
- 内存缓存
- 本地缓存
图片内存缓存
Flutter图片是支持内存缓存的，默认情况下Flutter支持1000张图片缓存到本地，并且这些图片的总计大小不得超过100MB。如果超过那么Flutter会根据LRU算法移除先前缓存的图片。所以我们可以适当调整缓存大小来增加列表图片加载的性能：
PaintingBinding.instance.imageCache.maximumSize= 2000;//最多2000张
PaintingBinding.instance.imageCache.maximunSizeBytes = 200 << 20;//最大缓存阈值
注意：图片缓存会对内存造成一定的压力，不建议内存缓存设置过大。
图片本地缓存
如果想增加本地缓存可以借助插件来完成:
# 图片加载
cached_network_image: ^3.1.0
列表常驻内存
默认情况下放在PageView中的页面切换走时会被销毁，再次切换回来会导致页面被重新创建，如果页面中有列表那么整个列表将被重新加载，降低用户体验。
解决：让页面的State实现 AutomaticKeepAliveClientMixin:
class _HomeTabPageState extends State<HomeTabPage> with AutomaticKeepAliveClientMixin
{
@override
bool get wantKeepAlive => true;
}
列表数量不足时无法下拉刷新和上拉加载更多，怎么处理？
StaggeredGridView.countBuilder(
physics: const AlwaysScrollableScrollPhysics()
)
HiState处理页面状态异常
- 处理页面状态异常
- setState() called after dispose()问题分析【在dispose之后调用setState会触发此问题】
ListView顶部多出间距处理
MediaQuery.removePadding(
removeTop: true,
context: context,
child:ListView()
)
图片渐变加载处理
transparent_image: ^2.0.0-nullsafety.0
解决iOS9/Android无法铭文传输的问题【http链接】
iOS
Info.plist中添加
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Android
AndroidManifest.xml中添加
android:usesCleartextTraffic="true"
tools:targetApi="28"
如：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.flutter_bili">
<application
android:label="flutter_bili"
android:icon="@mipmap/ic_launcher"
android:usesCleartextTraffic="true"
tools:targetApi="28"
>
网友评论