最完整的跨平台聊天UI方案：用Compose-Multiplatform构建即时通讯应用

你还在为多平台聊天应用的UI开发烦恼吗？既要适配Android、iOS，又要兼顾桌面端和网页端，代码重复编写、界面风格不统一、维护成本高……这些问题是否让你头疼不已？本文将带你一文解决这些痛点，通过Compose-Multiplatform的聊天示例应用，从零开始构建一个跨平台的即时通讯UI界面。读完本文，你将掌握Compose-Multiplatform的UI组件复用、状态管理、多平台适配等核心技能，轻松实现一套代码运行多端的聊天应用界面。

项目概述

Compose-Multiplatform是JetBrains开发的跨平台UI工具库，基于Kotlin编写，可用于开发跨平台的Android、iOS、macOS等应用程序。本文以Compose-Multiplatform的聊天示例应用为基础，详细介绍如何构建一个功能完善、界面美观的即时通讯UI。该示例应用不仅展示了Compose-Multiplatform的强大功能，还提供了SwiftUI与Compose的互操作示例，可在Android、iOS、桌面或浏览器中运行。

项目结构

聊天示例应用的核心代码位于examples/chat/目录下，主要包括以下几个部分：

• 共享代码模块：examples/chat/shared/src/commonMain/kotlin/，包含应用的核心逻辑和UI组件，如聊天界面、消息列表、发送消息组件等，这些代码可在各个平台共享。
• 平台特定代码：如iOS平台的examples/chat/iosApp/iosApp/ComposeViewControllerToSwiftUI.swift，用于实现SwiftUI与Compose的互操作。

开发环境搭建

在开始开发之前，需要搭建Compose-Multiplatform的开发环境。你可以参考JetBrains的官方文档来完成环境配置，确保你的开发环境满足Compose-Multiplatform的要求。

运行应用

配置好开发环境后，你可以通过以下方式运行聊天示例应用：

1. 在Android Studio中运行：选择相应平台的运行配置，然后点击运行按钮。运行配置界面如下所示：

2. 通过Gradle命令运行桌面端：

   ./gradlew desktopApp:run
   

3. 运行macOS平台：

   • 对于Intel CPU：./gradlew :shared:runDebugExecutableMacosX64
   • 对于Apple Silicon：./gradlew :shared:runDebugExecutableMacosArm64

核心UI组件实现

聊天应用的UI主要由聊天界面、消息列表和发送消息组件构成，下面详细介绍这些核心组件的实现。

聊天应用主界面

聊天应用的主界面使用Scaffold布局，包含一个顶部应用栏和一个内容区域。顶部应用栏显示应用标题，内容区域则包含消息列表和发送消息组件。相关代码位于examples/chat/shared/src/commonMain/kotlin/ChatApp.kt：

@Composable
fun ChatAppWithScaffold(displayTextField: Boolean = true) {
    Theme {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("The Composers Chat") },
                    backgroundColor = MaterialTheme.colors.background,
                )
            }) {
            ChatApp(displayTextField = displayTextField)
        }
    }
}

消息列表

消息列表使用LazyColumn实现，用于高效显示大量消息。它会自动滚动到最新的消息，并支持消息项的复用。相关代码位于examples/chat/shared/src/commonMain/kotlin/Messages.kt：

@Composable
internal inline fun Messages(messages: List<Message>) {
    val listState = rememberLazyListState()
    if (messages.isNotEmpty()) {
        LaunchedEffect(messages.last()) {
            listState.animateScrollToItem(messages.lastIndex, scrollOffset = 2)
        }
    }
    LazyColumn(
        modifier = Modifier.fillMaxSize().padding(start = 4.dp, end = 4.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        state = listState,
    ) {
        item { Spacer(Modifier.size(20.dp)) }
        items(messages, key = { it.id }) {
            ChatMessage(isMyMessage = it.user == myUser, it)
        }
        item {
            Box(Modifier.height(70.dp))
        }
    }
}

发送消息组件

发送消息组件包含一个文本输入框和一个发送按钮，用户可以在文本输入框中输入消息，点击发送按钮发送消息。相关代码位于examples/chat/shared/src/commonMain/kotlin/SendMessage.kt：

@Composable
fun SendMessage(sendMessage: (String) -> Unit) {
    var inputText by remember { mutableStateOf("") }
    TextField(
        modifier = Modifier.fillMaxWidth()
            .background(MaterialTheme.colors.background)
            .padding(10.dp),
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
        value = inputText,
        placeholder = {
            Text("Type message...")
        },
        onValueChange = {
            inputText = it
        },
        trailingIcon = {
            if (inputText.isNotEmpty()) {
                Row(
                    modifier = Modifier
                        .clickable {
                            sendMessage(inputText)
                            inputText = ""
                        }
                        .pointerHoverIcon(PointerIcon.Hand)
                        .padding(10.dp),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Icon(
                        imageVector = Icons.Default.Send,
                        contentDescription = "Send",
                        tint = MaterialTheme.colors.primary
                    )
                    Text("Send")
                }
            }
        }
    )
}

用户头像

用户头像使用圆形剪裁的图片实现，若用户没有提供头像，则显示一个带有用户颜色的圆形背景。相关代码位于examples/chat/shared/src/commonMain/kotlin/Messages.kt：

@OptIn(ExperimentalResourceApi::class)
@Composable
fun UserPic(user: User) {
    val imageSize = 48f
    val painter = user.picture?.let {
        painterResource(it)
    } ?: object : Painter() {
        override val intrinsicSize: Size = Size(imageSize, imageSize)
        override fun DrawScope.onDraw() {
            drawRect(user.color, size = Size(imageSize * 4, imageSize * 4))
        }
    }
    Image(
        modifier = Modifier
            .size(imageSize.dp)
            .clip(CircleShape),
        contentScale = ContentScale.Crop,
        painter = painter,
        contentDescription = "User picture"
    )
}

状态管理

聊天应用的状态管理使用了一个简单的Store模式，通过协程作用域创建Store实例，用于管理应用的状态和处理用户操作。相关代码位于examples/chat/shared/src/commonMain/kotlin/ChatApp.kt：

val store = CoroutineScope(SupervisorJob()).createStore()

在聊天应用中，使用collectAsState()方法观察状态变化，并根据状态更新UI：

@Composable
fun ChatApp(displayTextField: Boolean = true) {
    val state by store.stateFlow.collectAsState()
    // ...
    Messages(state.messages)
    // ...
}

多平台适配

Compose-Multiplatform的优势在于一套代码可以运行在多个平台，聊天示例应用也充分展示了这一点。通过使用Compose-Multiplatform提供的API和工具，开发者可以轻松实现应用在Android、iOS、桌面和网页等平台的适配。

例如，在iOS平台上，通过examples/chat/iosApp/iosApp/ComposeViewControllerToSwiftUI.swift文件实现了Compose与SwiftUI的互操作，使得Compose组件可以无缝集成到SwiftUI应用中。

总结与展望

通过Compose-Multiplatform的聊天示例应用，我们展示了如何构建一个跨平台的即时通讯UI界面。从核心UI组件的实现到状态管理，再到多平台适配，Compose-Multiplatform提供了一套完整的解决方案，帮助开发者高效地开发跨平台应用。

未来，随着Compose-Multiplatform的不断发展，我们可以期待更多强大的功能和更好的性能，使得跨平台应用开发变得更加简单和高效。如果你对Compose-Multiplatform感兴趣，可以继续深入学习其官方文档和示例项目，探索更多可能性。

希望本文能够帮助你了解如何使用Compose-Multiplatform构建即时通讯UI应用。如果你觉得本文对你有帮助，请点赞、收藏并关注我们，获取更多关于Compose-Multiplatform的开发技巧和最佳实践。下期我们将介绍如何为聊天应用添加更多高级功能，敬请期待！