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 技巧,希望您觉得它们有用。感谢您阅读本文,欢迎提供任何反馈。

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

保护原创,请勿转载!

相关推荐
每次的天空5 分钟前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭32 分钟前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日1 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安2 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑2 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟6 小时前
CTF Web的数组巧用
android
小蜜蜂嗡嗡7 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi007 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体
zhangphil9 小时前
Android理解onTrimMemory中ComponentCallbacks2的内存警戒水位线值
android
你过来啊你9 小时前
Android View的绘制原理详解
android