前言

在上一年 DevFest 的 Compose Camp 活动上，fundroid 与朱江两位讲师带着大家使用 Compose 完成了灵动岛作用

可是灵动岛毕竟是 iOS 上的特性，正好今年 KotlinConf 上宣布了 Compose-iOS 现已 alpha 了，那么假如咱们将现已用 Compose 完成的灵动岛作用，移植到 iOS 上又会怎么样呢？

想想多是一件美事啊，说干就干，看看把代码从 Jetpack Compose 搬迁到 Compose Multiplatform 中到底要做什么工作，要付出什么本钱

作用展现

使用 Compose 在 iOS 上实现灵动岛效果

首先看下作用，能够看到，基本完成了灵动岛切换的动画作用，与在 Android 上的作用也基本共同

完成过程

环境装备

要使用 Compose MultiPlatform 开发，需要以下环境

  • XCode
  • Android Studio
  • Kotlin Multiplatform Mobile 插件
  • Cocoapods 依靠管理器

其实跟 Kotlin Multiplatform 所需要的环境共同，其中最麻烦的可能是 Cocoapods 的装置，能够查看 KMM 装置 Cocoapods 的文档：Set up an environment to work with CocoaPods

此外，你也能够通过kdoctor指令来查看环境装备否正确

brew install kdoctor // 装置 kdoctor
kdoctor // 查看

假如一切环境都装备正确，你会看到以下输出

Environment diagnose (to see all details, use -v option):
[✓] Operation System
[✓] Java
[✓] Android Studio
[✓] Xcode
[✓] Cocoapods
Conclusion:
  ✓ Your system is ready for Kotlin Multiplatform Mobile development!

创立项目

Compose Multiplatform 项目其实就是在 KMM 项目中参加一些 Compose 的内容，仍是有不少模板代码的，咱们能够直接使用 JetBrains 提供的项目模板生成项目：compose-multiplatform-ios-android-template

使用 Compose 在 iOS 上实现灵动岛效果

如图所示，其实就是一个 KMM 工程的结构，android 项目的进口是 androidApp，iOS 项目的进口是 iosApp，同享代码放在 shared 模块

在 shared 模块中，各个渠道同享代码放在 commonMain 目录中，而各个渠道的定制代码则放在 androidMain 与 iosMain 中

在这里首要的不同在于，android 渠道直接返回了一个 Composable 函数，供 android 层调用，而 iOS 渠道则返回了一个 UIViewController

代码移植

在项目创立完成后，接下来就是代码移植的工作了。移植过程能够说是非常简单，基本上不用做任何改动，Jetpack Compose 项目就能够搬迁成 Compose Multiplatform 项目

在我搬迁过程中碰到的唯一不同在于资源文件的处理，如下所示，R 文件引证方法需要修改成字符串方法引证

// Jetpack Compose
Image(
    painterResource(R.drawable.icon_cover),
    "music cover",
    Modifier
        .size(animationData.musicImageSize)
        .clip(RoundedCornerShape(animationData.musicImageCorner))
)
// Compose Multiplatform
Image(
    painterResource("icon_cover.xml"),
    "music cover",
    Modifier
        .size(animationData.musicImageSize)
        .clip(RoundedCornerShape(animationData.musicImageCorner))
)

除此之外，两者的状态管理，布局，动画等 api 是完全共同的，能够直接复用代码

通过以上过程，搬迁就完成了，直接运行 androidApp 与 iosApp 就能够得到文章开端展现的作用了

正在处理中的问题

当然，现在 Compose Multiplatform 还处在 alpha 阶段，并不是说现已能够用于出产了，还有不少问题正在处理中

待支持的功能

使用 Compose 在 iOS 上实现灵动岛效果

图片来历：Compose Multiplatform on iOS by: Sebastian Aigner and Nikita Lipsky

能够看出，Compose Multiplatform 仍是有不少细节问题要处理的

性能问题

咱们打开 XCode 的 instruments 然后运行 app，就能够得到运行的 trace 文件，计算出运行次数较多或者比较耗时的方法

使用 Compose 在 iOS 上实现灵动岛效果

能够看出，耗时方法有适当一部分是 GC 相关的，当 GC 暂停发生时，会冻住一切对象，自然也会影响 UI 的渲染，导致卡顿

好消息是 Kotlin 正在优化 GC，期望将 GC 暂停控制在 1 到 2 ms 之内

总结

能够看出将 Jetpack Compose 版的灵动岛搬迁到 Compose Multiplatform 的本钱是非常低的，最耗时的部分可能是配环境的部分，两者的 API 基本上是共同的，因此代码能够无缝复用

Compose 跨渠道补全了 Kotlin 跨渠道只支持同享逻辑不支持同享 UI 的短板，降低了 Kotlin 跨渠道的开发本钱，总得来说，未来可期，希望 Jetbrains 能早日推出正式版

示例代码

本文一切代码可见：github.com/RicardoJian…

参考资料

Compose Multiplatform on iOS by: Sebastian Aigner and Nikita Lipsky