用Compose Multiplatform构建KMM应用

bytebeats
2,038 阅读8分钟

我正在参加「掘金·启航计划」

用Compose Multiplatform构建KMM应用

大家好, 我是一名Android开发者. 在这篇文章中, 我将分享一个KMM应用程序的概念示例和一个Compose for iOS演示. 该演示将展示如何从服务器上获取MidJourney图片, 并使用分页显示它们.

如果你想建立一些快速和易于维护的东西, 可以考虑使用Compose Multiplatform来建立Android和iOS平台的原生用户界面. 这可以让你写一次代码并在多个平台上使用, 节省时间并减少需要维护的代码量. 在这篇博文中, 我们将讨论建立一个Compose Multiplatform iOS项目并将KMM与Jetpack Compose for iOS合并.

1_b72_cneu_ILCnZwjM73m8w.webp

设置环境

当然, 跟着Jetbrains的文档走是有好处的. 他们已经很好地解释了如何安装环境, 但由于它是新发布的, 可能需要深入了解一些情况. 首先, 用KDoctor检查安装情况.

1_nO8jTqL4dhwGR7wDCXiXMg.webp

例如, 尽管我的机器上安装了XCode, 但我遇到了一个错误, 在文档或StackOverflow等网站上都找不到解决方案. 因此, 我不得不在Jetbrains的Slack频道上寻找答案. 幸运的是, 有人在我之前也问过类似的问题. 我向大家推荐这种方法, 因为Jetbrains团队非常积极地提供支持在他们的Slack频道.

1_NMJZoex4FsBKGW6UnZxyFQ.webp

设置一个Compose跨平台的iOS项目

要设置一个Compose Multiplatform iOS项目, 你需要在你的机器上安装Xcode. 一旦你安装了Xcode, 你可以在Android Studio中创建一个新项目, 并选择"Compose Multiplatform"作为项目模板. 目前, 我们还不能用Android Studio向导创建Compose Multiplatform iOS项目. 但我们可以用模板来做, 共享模块封装了Android和iOS项目之间共享的业务逻辑和UI代码.

要在你的iOS项目中使用共享的UI模块, 在你的Xcode项目中添加共享模块作为依赖, 方法是将其添加到Podfile中并运行pod install. 然后, 你可以在你的iOS项目中使用共享的UI代码.

KMM和Jetpack Compose

KMM是一个Kotlin多平台移动开发工具包, 使开发人员能够在多个平台上编写共享业务逻辑和代码. Jetpack Compose是一个UI工具包, 用于用声明式方法构建Android应用程序. 随着Compose Multiplatform的新发布, 开发人员现在可以从一个代码库中为Android和iOS平台构建本地声明式UI.

1_o4Pd9MjJgitdIwKKEiuECg.gif

通过结合KMM和Jetpack Compose, 开发者可以使用Kotlin编写共享业务逻辑和UI代码, 并使用Compose Multiplatform为Android和iOS平台创建本地用户界面. 这种方法可以为开发者节省大量的时间, 减少需要维护的代码量.

在此之前, KMM帮助我们在域/数据/依赖注入和共享库方面进行整合. 然而, 在这个新版本中, 不再需要在SwiftUI中编写(ofc如果你愿意, 你仍然可以编写), 而且因为这个要求被取消了, 我们现在也可以在share/common下编写完全共享的ViewModels.

以前, 无论我们用Swift还是Kotlin的第三方库(如KMM-ViewModels)编写ViewModels, 我们都必须在Swift端的UIViewController中处理像@Published对象或Bindings<T>这样的观察变量.

1_KJkUjQ4CKjIISPymmneTuQ.webp

MidJourney图片Compose跨平台移动应用

1_eNrA5nCsdGAC0YPIzv1l-A.gif

这个应用程序展示了由MidJourney创建的令人惊叹的图像. 它是用Compose Multiplatform开发的, 兼容Android和iOS平台.

你可以在GitHub的MidJourney图片Compose跨平台移动应用上找到本文讨论的应用.

1_evCjFzbWpPkwyoGsAjjKWg.webp

使用Kotlin和Jetpack Compose以MVVM概念开发的应用程序. 进行了网络请求状态、无尽分页、图像加载和图像缓存等过程.

消费者应用程序没有任何复杂的结构或操作. 他们使用共同的UI层(包括ViewModel), 并负责创建MjImagesApp. MjImagesApp和这个Composable的依赖, MjImagesViewModel, 在Android和iOS平台上的工作是一样的.

1_ljHjlgu3VeA6KQlEHSrMSg.gif

设计

MidJourney图片Compose跨平台移动应用遵循简洁的架构模式, UI、领域和数据层之间有明确的分离. 该应用使用Kotlin协程进行异步编程, 使用Ktor进行联网. 数据层负责从服务器获取图片, 领域层处理分页和过滤(映射). UI层使用Jetpack Compose构建, 负责向用户显示图片.

总的来说, 该应用程序的架构促进了可维护性、可测试性和可扩展性.

1_A6d0RX1wXjQY10wQ1PcltQ.webp

依赖库

- [Ktor](https://ktor.io/)
- [Koin](https://insert-koin.io/)
- [Kotlinx Serialization](https://kotlinlang.org/docs/serialization.html)
- [Kotlinx Coroutines](https://kotlinlang.org/docs/coroutines-overview.html)
- [Compose ImageLoader](https://github.com/qdsfdhvh/compose-imageloader)
- [KMM-ViewModel](https://github.com/rickclephas/KMM-ViewModel)

  • Ktor是一个Kotlin的网络框架, 它提供了一个客户端和服务器API, 用于在连接系统中构建异步服务器和客户端. 它被用在MidJourney图片Compose Multiplatform移动应用中, 用于联网目的.

  • Koin是Kotlin的一个轻量级依赖注入框架, 有助于建立更好的应用程序. 它被用于应用项目中, 以提供一个可以跨平台使用的依赖注入机制.

  • Kotlinx Serialization是一个Kotlin库, 它提供了一种将Kotlin对象转换成JSON格式的方法. 在应用项目中, 它被用来序列化和反序列化JSON数据.

  • Kotlinx Coroutines是一个用于Kotlin异步编程的库. 在应用程序中, 它被用来提供并发性并同时处理多个任务. 它有助于提高性能, 减少线程的阻塞.

  • Compose ImageLoader是一个库, 它为Jetpack Compose中加载图片提供了一种简单的方法. 在应用程序中, 它被用来从服务器上加载图片并显示给用户. 同时, 它还为我们提供了广泛的缓存机制. 另外, Compose ImageLoader还能与Kotlin Coroutines一起工作.

  • KMM-ViewModel是一个库, 它提供了一种在Kotlin多平台移动中在Android和iOS平台之间共享ViewModel的方法. 在应用程序中, 它被用来编写可以在Android和iOS平台之间共享的ViewModels.

总之, MidJourney图片Compose跨平台移动应用中使用的库是经过精心挑选的, 以确保应用程序的正常运行.

测试

共享/共用代码的单元测试可以在shared/common文件夹下运行. 为这个项目编写的单元测试就在这个目录下. 另一方面, UI测试则被添加到androidTests文件夹下. 如果在iOS和Android的前端有特定平台的逻辑, 那么分开测试是有意义的, 也是必要的.

1_OP0xuh6AwJO1CuxaHtNpOw.webp

1_yQACM7zXUJEIY5kyn2Ex4w.webp

限制因素

  1. 构建Kotlin Multiplatform Mobile(KMM)应用的一个主要挑战是确保项目中使用的所有库都支持在ARM和JVM平台上构建(如果您决定在共同/共享中使用它们). 这是因为一个库必须可以在两个平台上构建, 才能在共同路径中使用. 如果一个库不能在ARM上构建, 那么它就不能在公共路径中使用. 然而, KMM 生态系统正在迅速发展, 可使用的 KMM 支持的库和工具的数量与日俱增. 因此, 越来越容易找到同时支持ARM和JVM平台的库, 并构建高质量的KMM应用程序. 在无法在 ARM 上构建库的情况下, 仍然可以通过在 shared/android 或 shared/ios 下使用 expect/actual 而不是在公共路径中使用该库. 这使得开发人员可以继续使用对其应用程序至关重要的库, 同时仍然可以构建高质量的 KMM 应用程序.
  2. 你可能已经注意到Android和iOS应用程序之间有轻微的视觉差异. 这种差异是由于我使用了LazyVerticalStaggeredGrid for Android和LazyVerticalGrid for iOS. 在构建过程中, 我遇到了一个问题, 到今天为止我还没能解决. 具体来说, 我无法为iOS版的Jetpack Compose使用LazyStaggeredGrid.

1_ZrNt076yRJXjpkSkXzqqVQ.webp

对于一个处于alpha版本的框架来说, 这样的小情况总是会发生. 而这个blocker为expect/actual函数的使用开辟了一个很好的领域, 这是由KMM引入的.

作为一个小提示, 这个问题的修复很快就会出现. 我已经通过Slack联系了Dima Avdeev [JetBrains], 感谢他的快速行动.

总结

我在我的实体iPhone设备上彻底测试了MidJourney Images Compose Multiplatform Mobile应用, 我很高兴地报告, 我没有遇到任何性能问题. 该应用程序运行平稳, 我能够在应用程序中导航, 没有任何滞后或延迟.

此外, 值得注意的是, 应用程序中使用的Kotlin代码被编译器转换为Objective-C. 这使得代码可以在iOS设备上原生执行, 确保最佳的性能和兼容性.

总之, Compose Multiplatform是一个优秀的工具, 可以从一个代码库中为Android和iOS平台构建原生用户界面. 通过结合KMM和Jetpack Compose, 开发者可以使用Kotlin编写共享业务逻辑和UI代码, 并使用Compose Multiplatform为两个平台创建原生用户界面. 这种方法可以为开发者节省大量的时间, 并减少需要维护的代码量. 如果你正在寻找一种为Android和iOS平台构建原生UI的方法, Compose Multiplatform绝对值得考虑. 虽然它目前还处于alpha阶段, 有一些局限性, 但在开源社区的支持和JetBrains团队未来的版本改进下, 它将变得非常好.

谢谢你的时间 🌸 这就是全部了🙏
快乐的Kotlin / Compose!

avatar
文章
阅读
粉丝