Flutter技术解析与实战——闲鱼技术演进与创新-第1章(10)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......

1.5.3 第二代混合技术方案 FlutterBoost

1.重构计划

      闲鱼在推进Flutter 化过程当中,遇到了更加复杂的页面场景,也逐渐暴露了老方案的局限性和一些问题。所以,闲鱼启动了代号为FlutterBoost的新混合技术方案。我们的主要目标有:

  • 可复用通用型混合方案。
  • 支持更加复杂的混合模式,例如支持主页Tab。
  • 无侵入性方案,不再依赖修改Flutter 的方案。
  • 支持通用页面生命周期。
  • 统一明确的设计概念。

      跟老方案类似,新的方案仍采用共享引擎的模式实现。主要思路是由Native 容器通过消息驱动Flutter 页面容器,从而达到Native 容器与Flutter容器的同步目的。希望做到Flutter 渲染的内容是由Naitve 容器来驱动的。

      简单地理解,闲鱼想把Flutter 容器做得像浏览器一样。填写一个页面地址,然后由容器管理页面的绘制。在Native 侧,开发者只需要关心如何初始化容器,然后设置容器对应的页面标志即可。

2.主要概念(如图1-21)

31.jpg

图1-21

      (1)Native 层

  • Container:Native 容器、平台Controller、Activity 和ViewController。
  • Container Manager:容器的管理者。
  • Adaptor:Flutter 是适配层。
  • Messaging:基于Channel 的消息通信。

      (2)Dart 层

  • Container:Flutter 用来容纳Widget 的容器,具体实现为Navigator 的派生类。
  • Container Manager:Flutter 容器的管理者,提供show、remove 等API。
  • Coordinator:协调器,接受Messaging 消息,负责调用Container Manager的状态管理。
  • Messaging:基于Channel 的消息通信。

      (3)关于页面的理解

      在Native 和Flutter 中,表示页面的对象和概念是不一致的。在Native中,对于页面的概念一般是ViewController 和Activity。而在Flutter 中,对于页面的概念是Widget。我们希望可统一页面的概念,或者说弱化Flutter本身的Widget 对应的页面概念。换句话说,当一个Native 的页面容器存在的时候,FlutteBoost 保证一定会有一个Widget 作为容器的内容。所以,我们在理解和进行路由操作的时候,都应该以Native 的容器为准,Flutter Widget 依赖于Native 页面容器的状态。

      在FlutterBoost 的概念里说到页面的时候,指的是Native 容器和它所附属的Widget。所有页面的路由操作,打开或者关闭页面,实际上都是对Native 页面容器的直接操作。无论路由请求来自何方,最终都会转发给Native 实现路由操作。这也是接入FlutterBoost 时需要实现Platform 协议的原因。

      另一方面,我们无法控制业务代码通过Flutter 本身的Navigator 去push新的Widget。对于业务不通过FlutterBoost 而直接使用Navigator 操作Widget 的情况,建议由业务自己负责管理其状态。这种类型的Widget 不属于FlutterBoost 所定义的页面概念。

      理解这里的页面概念,对于理解和使用FlutterBoost 至关重要。

3.与老方案的主要差别

      老方案在Dart 层维护单个Navigator 栈结构用于Widget 的切换。而新的方案则是在Dart 侧引入了Container 的概念,不再用栈的结构维护现有的页面,而是通过将Key-Value 映射扁平化的形式去维护当前所有的页面,每个页面拥有一个唯一的ID 地址。这种结构很自然地支持了页面的查找和切换,不再受制于栈顶操作,一些由于Pop 导致的问题迎刃而解。同时,也不再依赖修改Flutter 源码的形式去实现,避免了实现的侵入性。

      这是如何做到的呢?

      Flutter 在底层提供了让开发者自定义Navigator 的接口,闲鱼自己实现了一个管理多个Navigator 的对象。当前最多只会有一个可见的Flutter Navigator,它包含的页面也就是当前可见容器所对应的页面。

      Native 容器与Flutter 容器(Navigator)是一一对应的,生命周期也是同步的。当一个Native 容器被创建的时候,Flutter 的一个容器也被创建,它们通过相同的ID 地址关联起来。当Native 的容器被销毁的时候,Flutter的容器也被销毁。Flutter 容器的状态跟随Native 容器而变化,这也就是Native 驱动。由Manager 统一管理切换当前在屏幕上展示的容器。

      下面用一个简单的例子描述一个新页面创建的过程:

  • 创建Native 容器(iOS ViewController,Android Activity or Fragment)。
  • Native 容器通过消息机制通知Flutter Coordinator 新的容器被创建。
  • Flutter Container Manager 得到通知,负责创建出对应的Flutter 容器,并且在其中装载对应的Widget 页面。
  • 当Native 容器展示到屏幕上时,容器给Flutter Coordinator 发消息,通知要展示页面的ID 地址。
  • Flutter Container Manager 找到对应ID 地址的Flutter Container 并将其设置为前台可见容器。

      这就是一个新页面创建的主要逻辑,销毁和进入后台等操作也类似由Native 容器事件去驱动。

      目前,FlutterBoost 已经在生产环境支撑闲鱼客户端中所有的基于Flutter 开发的业务,为更加负复杂的混合场景提供了支持,同时也解决了一些历史遗留问题。闲鱼在项目启动之初就希望FlutterBoost 能够解决Native App 混合模式接入Flutter 这个通用问题。所以把它做成了一个可复用的Flutter 插件,希望吸引更多感兴趣的朋友参与到Flutter 社区的建设中来。闲鱼的方案可能不是最好的,希望看到社区能够涌现出更加优秀的组件和方案。

1.5.4 扩展补充

1.性能相关

      在对两个Flutter 页面进行切换时,因为只有一个Flutter View,所以需要对上一个页面进行截图保存。如果Flutter 页面较多,则截图会占用大量内存。这里采用文件内存二级缓存策略,在内存中最多只保存2~3 个截图,其余的截图在写入文件时按需加载。这样一来,可以在保证用户体验的同时,使内存也保持在一个较为稳定的水平。

      在页面渲染性能方面,Flutter 的AOT 优势展露无遗。当页面快速切换的时候,Flutter 能够很灵敏地进行相应页面的切换,在逻辑上创造出一种Flutter 有多个页面的感觉。

2.Release 1.0 支持

      在项目开始的时候,闲鱼基于目前使用的Flutter 版本进行开发,而后进行了Release 1.0 兼容升级测试且没有发现问题。

3.接入

      只要是集成了Flutter 的项目,都可以用官方依赖的方式,非常方便地以插件形式引入FlutterBoost,只需要对工程进行少量代码接入即可。详细接入文档,请参阅GitHub 主页官方项目文档。

相关文章
DeepSeek技术报告解析:为什么DeepSeek-R1 可以用低成本训练出高效的模型
DeepSeek-R1 通过创新的训练策略实现了显著的成本降低,同时保持了卓越的模型性能。本文将详细分析其核心训练方法。
317 11
DeepSeek技术报告解析:为什么DeepSeek-R1 可以用低成本训练出高效的模型
DeepSeek模型的突破:性能超越R1满血版的关键技术解析
上海AI实验室周伯文团队的最新研究显示,7B版本的DeepSeek模型在性能上超越了R1满血版。该成果强调了计算最优Test-Time Scaling的重要性,并提出了一种创新的“弱到强”优化监督机制的研究思路,区别于传统的“从强到弱”策略。这一方法不仅提升了模型性能,还为未来AI研究提供了新方向。
256 5
深度干货 如何兼顾性能与可靠性?一文解析YashanDB主备高可用技术
数据库高可用(High Availability,HA)是指在系统遇到故障或异常情况时,能够自动快速地恢复并保持服务可用性的能力。如果数据库只有一个实例,该实例所在的服务器一旦发生故障,那就很难在短时间内恢复服务。长时间的服务中断会造成很大的损失,因此数据库高可用一般通过多实例副本冗余实现,如果一个实例发生故障,则可以将业务转移到另一个实例,快速恢复服务。
深度干货  如何兼顾性能与可靠性?一文解析YashanDB主备高可用技术
Python执行Shell命令并获取结果:深入解析与实战
通过以上内容,开发者可以在实际项目中灵活应用Python执行Shell命令,实现各种自动化任务,提高开发和运维效率。
55 20
深度解析1688 API对电商的影响与实战应用
在全球电子商务迅猛发展的背景下,1688作为知名的B2B电商平台,为中小企业提供商品批发、分销、供应链管理等一站式服务,并通过开放的API接口,为开发者和电商企业提供数据资源和功能支持。本文将深入解析1688 API的功能(如商品搜索、详情、订单管理等)、应用场景(如商品展示、搜索优化、交易管理和用户行为分析)、收益分析(如流量增长、销售提升、库存优化和成本降低)及实际案例,帮助电商从业者提升运营效率和商业收益。
186 20
智能文件解析:体验阿里云多模态信息提取解决方案
在当今数据驱动的时代,信息的获取和处理效率直接影响着企业决策的速度和质量。然而,面对日益多样化的文件格式(文本、图像、音频、视频),传统的处理方法显然已经无法满足需求。
94 4
智能文件解析:体验阿里云多模态信息提取解决方案
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙技术分享:HarmonyOS Next 深度解析 随着万物互联时代的到来,华为发布的 HarmonyOS Next 在技术架构和生态体验上实现了重大升级。本文从技术架构、生态优势和开发实践三方面深入探讨其特点,并通过跨设备笔记应用实战案例,展示其强大的分布式能力和多设备协作功能。核心亮点包括新一代微内核架构、统一开发语言 ArkTS 和多模态交互支持。开发者可借助 DevEco Studio 4.0 快速上手,体验高效、灵活的开发过程。 239个字符
242 13
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
196 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
入门级容器技术解析:Docker和K8s的区别与关系
本文介绍了容器技术的发展历程及其重要组成部分Docker和Kubernetes。从传统物理机到虚拟机,再到容器化,每一步都旨在更高效地利用服务器资源并简化应用部署。容器技术通过隔离环境、减少依赖冲突和提高可移植性,解决了传统部署方式中的诸多问题。Docker作为容器化平台,专注于创建和管理容器;而Kubernetes则是一个强大的容器编排系统,用于自动化部署、扩展和管理容器化应用。两者相辅相成,共同推动了现代云原生应用的快速发展。
195 11
深入解析BeautifulSoup:从sohu.com视频页面提取关键信息的实战技巧
深入解析BeautifulSoup:从sohu.com视频页面提取关键信息的实战技巧

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    42
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 5
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    7
  • 6
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    3
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    22
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 9
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    17
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    3
  • 推荐镜像

    更多
    AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等