环境配置
首先在 Module 的 build.gradle.kts 文件中添加 compose 的依赖
plugins {
kotlin("multiplatform")
id("com.android.library")
// 添加 compose 插件，
// 这里为什么是 1.5.10，以为我使用的是 1.9.20 的 Kotlin
// Kotlin 和 Compose 的版本对应关系可见文末链接
id("org.jetbrains.compose").version("1.5.10")
}
sourceSets {
val commonMain by getting {
dependencies {
// compose
api(compose.ui)
api(compose.foundation)
api(compose.material)
api(compose.runtime)
}
}
}
添加完毕后，sync 一下，提示需要将 compileSdkVersion 升级到 33，修改根目录下的 build.gradle
ext {
compileSdkVersion = 33
}
再次 sync，提示错误警告：uikit还处于试验阶段并且有许多bug，想要使用的话，需要在 gradle.properties 添加一个配置项
##ERROR: Compose targets '[uikit]' are experimental and may have bugs!
##But, if you still want to use them, add to gradle.properties:
org.jetbrains.compose.experimental.uikit.enabled=true
至此，可以开始尝试使用 Compose 了
使用ComposeUI写界面
写了一个常见的列表分组样式，更多 Compose 用法这里不做演示
// 必须添加这个注解
@Composable
fun AboutUsView(response: String, onItemClick: () -> Unit) {
// 解析出列表数据
val list = json.decodeFromString<List<AboutGroupItemBean>>(response)
// 创建一个纵向布局
Column {
// LazyColumn 类比 ListView
LazyColumn {
// 遍历添加数据
list.forEach { group ->
// 添加一个组数据，这里写的是一个分割线
item {
// 自定义的 Composable 函数
SHDivider()
}
val groupItem = group.groupItem
groupItem?.let {
// 继续遍历 group 中的列表数据
itemsIndexed(it) { index, item ->
Column {
// 只有非第一行数据，才有分割线
if (index != 0) {
SHDivider(1.dp)
}
val title = item["title"]
// 单条数据
SHListItem(title, onItemClick)
}
}
}
}
}
}
}
// 自定义的分割线
@Composable
fun SHDivider(height: Dp = 10.dp) {
Divider(
modifier = Modifier.height(height),
color = Color(0xFFFAFAFB)
)
}
// 自定义的列表数据
@Composable
fun SHListItem(title: String?, onItemClick: () -> Unit) {
if (!title.isNullOrEmpty()) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(44.dp)
.clickable(onClick = onItemClick)
.background(Color.White),
contentAlignment = Alignment.CenterStart
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxWidth()
) {
Text(
text = title,
fontSize = 14.sp,
color = Color(0xFF333333),
modifier = Modifier.padding(start = 15.dp)
)
Text(
text = "箭头",
modifier = Modifier.padding(end = 15.dp)
)
}
}
}
}
遇到的问题
加载本地图片
使用 Compose 加载本地图片代码如下
Image(
painter = painterResource(res: String),
contentDescription = null,
)
但是上述导入的依赖库中并没有 painterResource 函数，故需要添加新的依赖，代码如下
sourceSets {
val commonMain by getting {
dependencies {
...
// 解决 compose-ui 资源加载问题
@OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
implementation(compose.components.resources)
}
}
}
这里有个问题，compose.components.resources 接入时，需要添加 @OptIn 注解，注解的意思为：这是一个试验中的库，说明还不能用在生产包中，只能用于尝鲜
看了 painterResource 的源码，也有着大大 TODO 注释，说未来这个 API 会改变。
解决方案
在这个资源库稳定之前，其实也是有其他解决方案的，一个是使用第三方资源库，另一个是使用 expect/actual 进行平台化实现（有点麻烦，且不合理）。
iOS 平台 JSON 序列化失败
JSON 字符串转 ViewModel，一个很常见的需求，在 KMM 中如何使用呢？可以使用 kotlinx-serialization-json ，它是一个支持跨平台的序列化库
plugins {
// 添加插件
kotlin("plugin.serialization").version("1.9.20")
}
sourceSets {
val commonMain by getting {
dependencies {
// Kotlin Json 解析
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.1")
}
}
}
用法可以参考：kotlinx-serialization-json - GitHub
下方这段代码在 Android 平台上是可以正常使用的，但是在 iOS 平台上闪退了，目前还没有定位到原因。
val list = json.decodeFromString<List<AboutGroupItemBean>>(response)
