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混编的一些问题,补充自己的技术盲区,就如开头说的,做的一些笔记,比较零散。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容