tencent cloud

即时通信 IM

Android(Compose)

下载
聚焦模式
字号
最后更新时间: 2026-06-03 16:33:54
本文会引导您构建会话列表界面。

开发环境要求

Android Studio Arctic Fox (2020.3.1) 及以上
Android SDK API Level 21 (Android 5.0) 及以上

前置条件

在构建界面之前,请确保您已经完成了以下 4 件事:
1. 在控制台创建了一个应用。
2. 在控制台创建了至少 2 个用户账号。
3. 集成了 TUIKit Compose
4. 调用 LoginStorelogin 接口登录组件。
注意:
1. 每次启动应用,登录一次即可。
2. 请确保登录成功,我们建议您在登录成功的回调里进行下文的操作。
如果您尚未完成以上 4 步,请先参考 快速开始 中的对应步骤完成,否则在实现下文功能时可能遭遇阻碍。
如果您已经完成,请继续阅读下文。

步骤说明

注意:
如果您事先没有跟任何人、任何群组发送过消息,是不会产生会话的,此时加载 ConversationList ,列表为空。为了体验效果,建议您先给一些账号发送消息,触发会话的产生。如果您想了解如何在聊天界面发送消息,请参考文档:构建聊天界面
会话列表界面由 ConversationList 这个 @Composable 组件构成。你可以在 onConversationClick 回调中处理点击会话列表项事件。
注意,如果你直接使用我们的示例代码,需要预填充这几个参数:
sdkAppID,上文获取的 sdkAppID。
userID,操作者的 userID,也就是 快速开始 中创建的 user1。
userSig,操作者的 userSig,也就是 快速开始 中创建的 user1 的 userSig。
App 启动即加载会话列表页,示例代码如下:
// ConversationListActivity.kt
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.trtc.tuikit.atomicx.basecomponent.theme.LocalTheme
import io.trtc.tuikit.atomicx.conversationlist.ui.ConversationList
import io.trtc.tuikit.atomicxcore.api.CompletionHandler
import io.trtc.tuikit.atomicxcore.api.login.LoginStore

class ConversationListActivity : AppCompatActivity() {

private val sdkAppID: Int = 1234567890 // TODO: Fill in your sdkAppID here
private val userID = "" // TODO: Fill in your userID here
private val userSig = "" // TODO: Fill in your generated userSig here

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
login()
}

private fun login() {
LoginStore.shared.login(this, sdkAppID, userID, userSig, object : CompletionHandler {
override fun onSuccess() {
showConversationListPage()
}
override fun onFailure(code: Int, desc: String) {
// Handle login failure
}
})
}

private fun showConversationListPage() {
setContent {
val colors = LocalTheme.current.colors
Column(
modifier = Modifier
.fillMaxSize()
.background(color = colors.bgColorOperate)
.statusBarsPadding()
) {
// Navigation Bar
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.height(44.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = "Conversations",
fontSize = 17.sp,
fontWeight = FontWeight.W600,
color = colors.textColorPrimary
)
}

HorizontalDivider(color = colors.strokeColorPrimary)

// ConversationList
ConversationList(
onConversationClick = { conversation ->
// Handle conversation click, e.g. navigate to ChatPage
// conversation.conversationID
}
)
}
}
}
}
运行效果示意图:


更多实践

您可以本地 运行 Chat Demo 源码,探索更多的界面实现。

联系我们

如果您在接入或使用过程中有任何疑问或者建议,欢迎 联系我们 提交反馈。


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈