flutter实践笔记

尽量自律的持续更新,主要是自己回顾使用,比较零散,时间碎片化严重...

背景,为什么要做

  • 简历库
    从近一两年的面试招聘来看,iOS简历较少,实锤行业困境
  • iOS表现趋于平庸???
    新系统的更新率在下降,抛开新系统设备耗能的因素,特性吸引降低也是一个因素,这是AppStore统计系统占比分布,iOS14发布已长达10个月,更新率不急往年同期95%+


    appstore.png
  • 很大的职业上限问题,上升通道较窄
    客户端很难独立完成业务线完成场景的需求,或者说承担项目的核心价值任务,在支撑横向对比较为劣势,人员晋升困难,待遇提升很大程度只能靠‘跳大厂’解决。
  • 领导重视度不够,长期看期望值偏低
    明显的现象就是:1.纯前端很难某得重要的技术负责人职位,2.各种混合框架的流行,甚至什么牛马框架都来蹭跨端热度,混合跨端已经出现人传人的盲目现象。或为"内卷",或为"降本",以至于前端对外的技术产出印象就是 画画UI
  • 个人一些见解,不喜勿喷
    iOS市场占比,远低于Android,但是还能有不错的局面的根本原因是iOS个体用户价值较高。只要成规模的App产品都会两手抓。
    Flutter热度很高,但Flutter不会代替原生,Flutter是很好的一个客户端业务补充场景,针对团队情况,团队规模,业务场景等可以进行Flutter混编的开展,
    跨端解决方案,和前端基础知识已经要成为客户端开发者必备的技能,技能提升的同事,要多阅读提升自己的职场综合能力。
    职场上的很多变化都是不以人意志为转移的,它是一个环境问题,也是个市场问题,作为职场的生存的人,我们能做的是适应这种变化,或者说跟上这种变化。如果自己实在感觉不是,那不要迁就,离开它,广阔天地,大有作为

环境配置

基础的配置步骤官网都比较详细,这里只列一下再配置过程中碰到的问题

  • 执行flutter doctor,出现错误:Flutter requires Android SDK 29 and the Android BuildTools 28.0.3 To update the Android SDK visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.
    出现这出情况,查看/Users/~~~~你的用户名/Library/Android/sdk --- platforms 中是否存在android-29
    如果没有,通过Android studio -- Configure -- SDK Manager -- SDK Platforms -- 选中Android10.0(Q) -- 勾选show packages details 既能看到android 29,点击apply下载安装即可,完成后重启Android studio,再执行flutter doctor即可正常进行
  • 执行flutter doctor 出现错误:Android license status unknown. Run flutter doctor --android-licenses to .....
    出现这种情况先执行:flutter doctor --android-licenses
    如果出现 ERROR: JAVA_HOME is set to an invalid directory
    那说明你的环境变量配置有问题,没有找到正确的path:1.没有配置path,2.path不正确,无法对应到JDK
    解决办法:
    打开环境变量:open -e .bash_profile
    查看你的JAVA_HOME= 路径下是否存在.JDK,并且核对你路径是否正确
    修改完成后,重启终端,重新运行flutter doctor

开始混编

关于Flutter中Widget的理解

Flutter中的Widget的概念比较广泛,不仅可以表示UI元素,也可以表示一些功能性的组件。叫控件(不同于原生的控件概念)也好,叫组件也好,也已不太纠结,但按我的理解,flutter主要就是负责构建用户界面的,所以我叫他们控件,不叫组件,以区别于原生的组件概念

  • StatelessWidget和StatefullWidget
    widget的状态(state)是一些可以更改的值,比如滑动条,比如复选框。widget的状态保存在一个State对象中, 它和widget的布局显示分离。当widget状态改变时,State 对象调用setState(),告诉框架去重绘widget。所以这两个最大的区别是setState(),StatelessWidget不能使用setState。
  • context
    build方法有一个context参数,它是BuildContext类的一个实例,表示当前widget在widget树中的上下文,每一个widget都会对应一个context对象(因为每一个widget都是widget树上的一个节点)。实际上,context是当前widget在widget树中位置中执行”相关操作“的一个句柄。

原生项目混编

官方推荐使用CocoaPods依赖管理工具来安装Flutter SDK,这种方式要求当前项目的每个开发人员本地都必须安装Flutter环境

  • Podfile文件
    在项目原有的podfile文件中增加以下flutter模块内容:
# flutter模块相关
def flutter
  flutter_application_path = './consumer_flutter/'   // 这个路径根据自己项目调整即可
  load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
  install_all_flutter_pods(flutter_application_path)
end
  • 终端执行pod install
    podinstall 实际上解析了Generated.xcconfig文件,获取Flutter工程配置,/consumer_flutter/.ios/Flutter/目录下,主要包含了Flutter SDK路径、Flutter工程入口、编译产物等。将Flutter SDK中的 Flutter.framework通过pod添加到原生工程
  • 原生部分增加的内容
    我是将原生App四个原生tab页面之一,拿来做重构,现在大致列一下,我在原生页面中添加的代码
import Flutter
import FlutterPluginRegistrant
...
// FlutterBaseViewController是继承FlutterViewController的,做了少量定制
let personal = FlutterBaseViewController(project: nil, nibName: nil, bundle: nil) 
...
// 我的
self.personal.splashScreenView = UIView() // 解决原生跳转Flutter页面出现了启动页面的问题
FlutterChannelManager.shared.registerChannel(viewController: self.personal)
self.addChild(MainNavigationController(rootViewController: self.personal))

至此至少你的原生工程,已经可以跳转Flutter页面了

  • 使用Android Studio进行Flutter 部分的开发(当然VSCode是非常好的编辑器)
    使用Android Studio打开工程下的consumer_flutter文件,进行业务代码的编写

结尾

我将对我我负责的其中一个项目中的一个模块进行Flutter重构,并将之上线,来实践Flutter混编的一些问题,补充自己的技术盲区,就如开头说的,做的一些笔记,比较零散。

你可能感兴趣的:(flutter实践笔记)