Compose多平台 (CMP) 开发的四个实用技巧

本文译自Four useful tips for Compose Kotlin Multiplatform (KMP)

译者注: 这篇文章虽然比较短,但提到的问题还是比较具体和典型的,针对CMP项目的一些配置还是很有借鉴意义的。

简介

正如我在上一篇文章《将多模块应用程序完全迁移到 Compose Kotlin Multiplatform (KMP)》中所说,上个月我一直在将现有的多模块应用程序迁移到 Compose Multiplatform,除此之外,我还从头开始创建一个新的 Compose Multiplatform 多模块项目。在这两个项目中,我都遇到了相同的"问题"或者说"阻碍",因此,如果您正在迁移或从头开始启动 CMP 项目,那么本文就是为你量身定做的。

提示 1:预览

KMP 不支持 commonMain 目录Compose组件的预览,因此我想到了在 androidMain 目录中创建它们,并且它们的预览运行得很好。

例如:

bash 复制代码
commonMain/com/example/feature/component/FeatureScreen.kt
androidMain/com/example/feature/component/FeatureScreenPreview.kt

提示 2:BackHandler

KMP 不支持 BackHandler 操作,因此我创建了一个用于屏幕的expect函数,并在 androidMain 中的actual函数上添加了 BackHandler 操作,并将 iosMain 留空(因为我在 iOS 中没有找到类似的操作)。

例如:

Kotlin 复制代码
// commonMain/ com.example.feature.component.FeatureScreen.kt
@Composable
expect fun FeatureScreen(
    viewModel: FeatureScreenViewModel,
)

@Composable
internal fun Content(
    viewModel: FeatureScreenViewModel,
) {
    ...
}
Kotlin 复制代码
// androidMain/ com.example.feature.component.FeatureScreenActual.kt (needs a name different from common)
@Composable
actual fun FeatureScreen(
    viewModel: WorkScreenViewModel,
) {
    BackHandler { viewModel.onIntent(WorkIntent.Back) }

    Content(
        viewModel = viewModel,
    )
}
// extra: I have joined the preview in this same class to have it better organized.
Kotlin 复制代码
// iosMain/ com.example.feature.component.FeatureScreenActual.kt (needs a name different from common)
@Composable
actual fun FeatureScreen(
    viewModel: WorkScreenViewModel,
) {
    Content(
        viewModel = viewModel,
    )
}

提示 3:测试模拟

我喜欢使用 mockk 库进行模拟测试,在撰写本文时,KMP 尚不支持该库,因此我决定在 androidUnitTest 目录中创建 UnitTest,并将库依赖项添加到 androidUnitTest.dependencies {} 块中。

对于此类测试,我使用了支持 KMP 的 kotlin-test jetbrains 库。

例如:

Kotlin 复制代码
mockk = { group = "io.mockk", name = "mockk", version.ref = "mockk-version" }
kotlin-test = { group = "org.jetbrains.kotlin", name = "kotlin-test", version.ref = "kotlin-version" }
Kotlin 复制代码
// feature build.gradle.kts
kotlin {
    ...

    sourceSets {
        androidUnitTest.dependencies {
            implementation(libs.mockk)
        }

        commonTest.dependencies {
            implementation(libs.kotlin.test)
        }
    }
}
bash 复制代码
androidUnitTest/com/example/feature/usecase/UseCaseTest.kt

提示 4:UI 测试

官方的 Compose 多平台 UI 测试指南指出,必须使用commonTest 目录进行 UI 测试,但我更喜欢使用androidInstrumentedTest目录,因为使用这种方法,我可以将单元测试与 UI 测试分开,并且我可以直接从同一个测试类执行它们,并从目录运行所有 UI 测试。

例如:

Kotlin 复制代码
mockk-android = { group = "io.mockk", name = "mockk-android", version.ref = "mockk-version" }
ui-test-junit4-android = { group = "androidx.compose.ui", name = "ui-test-junit4-android", version.ref = "uiTestJunit4AndroidVersion" }
ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "uiTestManifestVersion" }
kotlin-test = { group = "org.jetbrains.kotlin", name = "kotlin-test", version.ref = "kotlin-version" }
Kotlin 复制代码
// feature build.gradle.kts
plugins {
    ...
    alias(libs.plugins.compose.multiplatform)
    alias(libs.plugins.compose)
}

kotlin {
    ...

    sourceSets {
        androidInstrumentedTest.dependencies {
            implementation(libs.mockk.android)
            implementation(libs.ui.test.junit4.android)
        }

        commonTest.dependencies {
            implementation(libs.kotlin.test)
            @OptIn(ExperimentalComposeLibrary::class)
            implementation(compose.uiTest)
        }
    }
}

...

dependencies {
    debugImplementation(libs.ui.test.manifest)
}
bash 复制代码
androidInstrumentedTest/com/example/feature/component/ScreenAndroidTest.kt

结论

在本文中,我们看到了一些 Compose Multiplatform 技巧,希望您觉得它们有用。感谢您阅读本文,欢迎提供任何反馈。

欢迎搜索并关注 公众号「稀有猿诉」 获取更多的优质文章!

保护原创,请勿转载!

相关推荐
Ya-Jun2 小时前
常用第三方库精讲:cached_network_image图片加载优化
android·flutter
_一条咸鱼_2 小时前
Android嵌套滑动详解
android·面试·android jetpack
zhishishe5 小时前
工具指南:免费将 PDF 转换为 Word 的 10 个工具
android·windows·pdf·word
孙同学_5 小时前
【MySQL】004.MySQL数据类型
android·数据库·mysql
流浪汉kylin7 小时前
Android 图片选择器改系统
android
前行的小黑炭8 小时前
Android 上下位机开发:串口是什么,为什么android版本都比较低?粘包半包的原因以及处理思路,缓冲区处理,以及超时清空缓冲区....
android
移动开发者1号8 小时前
你知道Android中配置resourcePrefix的作用吗?
android
tangweiguo030519878 小时前
Android Compose 系统 Scope 的优化实践
android
我命由我123458 小时前
Android Cordova 开发 - Cordova 快速入门(Cordova 环境配置、Cordova 第一个应用程序)
android·开发语言·前端框架·android studio·h5·安卓·android-studio
老板来根葱9 小时前
应用进程创建二三事
android·源码阅读