Compose 能应用于跨平台,主要是基于 KMM 架构,KMM 的介绍可以查看官方文档《Get started with Kotlin Multiplatform Mobile》,我们来看下 KMM 的简单架构:

commonMain 为通用层模块,也可以被称为平台无关层,如果 commonMain 涉及到平台相关操作的话,则需要定义 expect 方法,让 xxxMain 模块去 actual 实现这个方法,这样,在不同的平台集成 KMM 时就可以实现各自平台的效果。

从 KMM 架构可以看出,一些通用的逻辑计算完全可以丢进 commonMain 来实现,以此来达到各端只维护一份代码的目的,也算是提效了。

KMM 架构可以实现各端的通用逻辑,那基于 KMM 的 Compose 主要目的是为了实现各平台的 ui 统一。从 compose-jb 仓库来看,目前能复用的只有 Android 和 Desktop,想支持全跨平台的话,任务依然很艰巨,我们来看下简单的架构图:

  • Android 与 Desktop 使用 jb-compose 来实现 ui 复用
  • web 是自己实现了一套 Compose UI 逻辑,ui 组件依赖的是 web-core-js,所以,无法与其他端复用
  • iOS 暂时没有实现 Compose UI

Android 与 Desktop 能使用一份代码来做到 ui 复用的主要原因是 jb 拷贝了一份 jetpack compose 代码,然后实现了 jb-compose 和 compose-desktop,jb-compose 为 commonMain 层使用的通用模块,jetpack-compose 为 Android 所集成的平台模块,compose-desktop 为 desktop 所集成的平台模块,:

既然是拷贝 jetpack compose 来实现一份代码达到 ui 复用,所以,在编写 desktop 代码时,会发现各个 import 的组件包名都是 androidx,确实会有点奇奇怪怪,即使以后复用到了 iOS ,这块 androidx 包名也无法被摆脱。

这里面还有一个小细节,commonMain 明明依赖的是 jb-compose,Android 依赖的是 jetpack-compose,这两个库参与打包的话,难道不会发生 duplicate class 错误嘛?这里可以看下 ComposePlugin 插件的 RedirectAndroidVariants 类,在 Android 项目编译的时候,会将 jb-compose 依赖替换成 jetpack-compose。

这里面有个小插曲,在我看 compose-jb 项目的 sample 时,看到 todoapp 有 iOS 项目,难道 jb 开始支持 iOS 了?当我打开 README 时发现,咋被耍猴了:

开发跨平台应用还需要注意哪些?

既然目前可以支持 Android 和 Desktop,那么,我们在开发界面时需要注意哪些呢?我大致列了一下:

  • 路由、状态、生命周期统一
  • 图片资源统一
  • 多语言统一

1、路由、状态、生命周期统一

在 Android 平台,可以使用 androidx.navigation:navigation-compose 来实现组件路由,但该组件 jb 并没有移植到 jb-compose 中,所以,无法在两个平台上实现复用,好在浏览 jb-compose 项目的 issue 时找到了一个可替代的方案 Decompose。

Decompose 支持的能力有:

  • 路由
  • 生命周期
  • 状态

Decompose 支持的平台有:

  • android,
  • jvm
  • js (both IR and Legacy modes)
  • iosX64, iosArm64
  • tvosArm64, tvosX64
  • watchosArm32, watchosArm64, watchosX64
  • macosX64

试着跑了下 sample,效果如下:

在 jb-compose 里的 todoapp sample 中,也用到了该库:

2、图片资源统一

为了统一两端获取 Drawable 资源的差异,可以将 Android 中 R.drawable 获取资源的方式改成 resources.getIdentifier ,但如果 Android 项目有用到如 AndResGuard 等资源混淆的话,则这块代码将会报错,需要做 keep 处理。

如果项目有资源混淆需求的话, 建议直接定义获取图片的方法,如:

3、多语言统一

多语言的实现与图片资源设置类似:

在运行 desktop 项目时遇到中文多语言乱码问题,解决办法是将项目编码改成 UTF-8 即可:

  • 资源设置可以查看我的项目:https://github.com/MRwangqi/KMPCompose
  • desktop 多语言设置:https://zhidao.baidu.com/question/58590642.html

总结

在整个调研和使用下来,感觉 Compose 跨平台还有很长的路要走,google 一直在埋头发展自己的 jetpack compose,如果 jb 与 google 能双向奔赴的话,那该有多好。

我觉得,如果有一款能直接让客户端的编程语言(kotlin、swift)直接实现跨端,而不是再学习一款新的语言(dart) 来实现多平台开发,那真是一件美好的事情。

Compose 跨平台的现状相关推荐

  1. Compose跨平台又来了,这次能开发iOS了

    /   今日科技快讯   / 近日,有消息称百度3月将推出ChatGPT风格服务.经百度确认,该项目名字确定为文心一言,英文名ERNIE Bot,三月份完成内测,面向公众开放. 目前,文心一言在做上线 ...

  2. Compose跨平台第二弹:体验Compose for Web

    前言 在Compose跨平台第一弹:体验Compose for Desktop 中,我们已经了解了Compose-jb以及如何使用Compose-jb开发简单的桌面端应用,第二弹,我们就来了解下如何使 ...

  3. 原创 | 国内首批工业互联网十大双跨平台建设现状如何?

    根据世界银行的数据,中国工业占国内生产总值的41%,占世界工业总值的22%,超过世界上任何一个国家.但是工业企业面临着严峻挑战,在这一过程中工业互联网平台是实现产业转型的关键,因此中国越来越多的厂商通 ...

  4. Compose也能跨平台?Compose Multiplatform是啥?KMM又是什么?

    现在的跨平台框架真是跟打了鸡血似的,跟生产队的驴一样玩命的更新啊,一会儿功夫就遍地开花,开发者尤其是Androiders们还能学得过来吗? Compose Multiplatform Compose ...

  5. 跟我一起使用 compose 做一个跨平台的黑白棋游戏(4)移植到compose-jb实现跨平台

    前言 在上一篇文章中,我们已经实现了游戏的所有界面和逻辑代码,并且在 Android 上已经可以正常运行. 这篇文章我们将讲解如何将其从使用 jetpack compose 修改为使用 compose ...

  6. KMM+Compose 开发一个Kotlin多平台应用

    前言 现在跨平台开发框架有很多,比如H5类型,RN,Flutter等,而Kotlin多平台+Compose跨平台ui可能也是未来一种好用的开发框架 ps:后文KMM都是指Kotlin多平台框架,而不是 ...

  7. Compose Multiplatform 正式官宣,与 Flutter 必有一战?

    作者 | fundroid 来源 | AndroidPub 7月底 Compose for Android 1.0 刚刚发布,紧接着 8月4日 JetBrains 就宣布了 Compose Multi ...

  8. 移动端跨平台开发的深度解析

     跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头.(事实上更 ...

  9. Compose Multiplatform 正式官宣,与 Flutter 迟早必有一战?

    7月底 Compose for Android 1.0 刚刚发布,紧接着 8月4日 JetBrains 就宣布了 Compose Multiplatform 的最新进展,目前已进入 alpha 阶段. ...

  10. 关于那些最好玩的户外APP合集下(适合资深驴友、牛逼设计狮、装逼攻城狮)...

    本文会陆续分享分析全国最好的30个户外APP(下载量均至少在30万级别以上),希望能给户外爱好者.Ui设计狮.户外APP开发攻城狮一些启示. 关于那些最好玩的户外APP合集上(适合资深驴友.牛逼设计狮 ...

最新文章

  1. Xtrabackup bug记录
  2. mysql为查询结果字段赋默认值
  3. Android之Handler有感(二)
  4. 爱上MVC3系列~同步与异步提交,在过滤器里如何进行重定向~续
  5. PHP Curl transfer closed with outstanding read data remaining
  6. Java核心(三):代码块的作用
  7. Python函数传入的参数是否改变(函数参数、指针、引用)
  8. ibiliplayer是什么_Bilibili视频播放页面接口整理(不定期更新)
  9. 搭建简单JAVA分布式爬虫系统
  10. 【NOIP2016提高组复赛】蚯蚓 题解
  11. 单片机之汇编语言和C语言(以PIC单片机为例)
  12. 2022年下半年软件设计师下午真题及答案解析
  13. cf方框透视易语言代码怎么写_如何用 C++ 写一个可编程软件渲染器?
  14. google chrome 同步书签 查看gmail邮箱 谷歌浏览器同步助手
  15. 结构化随机森林 代码说明
  16. LeetCode 633.平方数之和(python题解)
  17. Office2013 及 WPS 设置护眼文档颜色方法
  18. 【d3】树图-各种效果集合(附效果图)
  19. Asia/Shanghai与GMT-8的区别
  20. sysprep无法验证你的windows安装_Sysprep无法验证你的windows 安装。

热门文章

  1. 腾讯、华为角逐“云游戏”
  2. #华为云#听从你心,无问西东
  3. CSDN 修改名字昵称以及ID 修改博客标题 - 告别自动生成的 id (亲测有效!)
  4. VMware虚拟机 网桥模式详细配置(及计算机网络基本知识 IP/子网掩码/网关/DNS)
  5. 【SpringCloud】Gateway新一代网关
  6. iOS 自定义播放器
  7. 菜鸟最初级网络安全常识
  8. 使用R语言进行时间序列(arima,指数平滑)分析
  9. 移动端那些事儿(二)jquery手势插件之jGestures
  10. Matlab坐标轴标签中文设置宋体,英文设置新罗马字体(Times New Roman)