Feedback
Android（Compose）

本文会引导您构建聊天界面。
开发环境要求
Android Studio Ladybug（2024.2.1）及之后的版本，JDK 17。
Android 6.0（API 23）及以上真机或模拟器。
前置条件
在构建界面之前，请确保您已经完成了以下 4 件事：
1. 在控制台创建了一个应用。
2. 在控制台创建了至少 2 个用户账号。
3. 集成了 TUIKit Compose。
4. 调用 LoginStore 的 login 接口登录组件。
注意：
每次启动应用，登录一次即可。
请确保登录成功，我们建议您在登录成功的回调里进行下文的操作。
如果您尚未完成以上 4 步，请先参考 快速开始 中的对应步骤完成，否则在实现下文功能时可能遭遇阻碍。
如果您已经完成，请继续阅读下文。
步骤说明
单聊界面
如果跳转到单聊消息界面，可以直接参考 快速开始。
群聊界面
如果跳转到群聊消息界面，需要传入有效 groupID。这里需要你有一个已经存在群组的 groupID。
如果没有群组，请前往 控制台 创建一个群组，操作路径：Chat > 群组管理 > 添加群组。
创建成功后，您可以直接在当前页看到 groupID：
﻿
群聊界面依然由 MessageList 和 MessageInput 两个 @Composable 组件拼接而成。
注意，如果直接使用下列示例代码，需要预填充这几个参数：
sdkAppID，上文获取的 sdkAppID。
senderUserID，发送消息者的 userID，也就是 快速开始 中创建的 user1。
senderUserSig，发送消息者的 userSig，也就是 快速开始 中创建的 user1 的 userSig。
groupID，群组 ID。
App 启动即加载群聊消息列表页，示例代码如下：
   // GroupChatActivity.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.Box
   import androidx.compose.foundation.layout.Column
   import androidx.compose.foundation.layout.Row
   import androidx.compose.foundation.layout.fillMaxSize
   import androidx.compose.foundation.layout.fillMaxWidth
   import androidx.compose.foundation.layout.height
   import androidx.compose.foundation.layout.navigationBarsPadding
   import androidx.compose.foundation.layout.padding
   import androidx.compose.foundation.layout.statusBarsPadding
   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.chat.uikit.components.theme.LocalTheme
   import io.trtc.tuikit.chat.uikit.components.messageinput.ui.MessageInput
   import io.trtc.tuikit.chat.uikit.components.messagelist.ui.MessageList
   import io.trtc.tuikit.atomicxcore.api.CompletionHandler
   import io.trtc.tuikit.atomicxcore.api.login.LoginStore
﻿
   class GroupChatActivity : AppCompatActivity() {
﻿
       private val sdkAppID: Int = 1234567890 // TODO: Fill in the sdkAppID here
       private val senderUserID = "" // TODO: Fill in your userID here
       private val senderUserSig = "" // TODO: Fill in your generated userSig here
       private val groupID = "" // TODO: Fill in the groupID here
﻿
       // C2C conversationID: "c2c_${userID}", Group conversationID: "group_${groupID}"
       private val conversationID: String get() = "group_${groupID}"
﻿
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           login()
       }
﻿
       private fun login() {
           LoginStore.shared.login(this, sdkAppID, senderUserID, senderUserSig, object : CompletionHandler {
               override fun onSuccess() {
                   showGroupChatPage()
               }
               override fun onFailure(code: Int, desc: String) {
                   // Handle login failure
               }
           })
       }
﻿
       private fun showGroupChatPage() {
           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 = groupID,
                           fontSize = 17.sp,
                           fontWeight = FontWeight.W600,
                           color = colors.textColorPrimary
                       )
                   }
﻿
                   HorizontalDivider(color = colors.strokeColorPrimary)
﻿
                   // MessageList
                   Box(modifier = Modifier.weight(1f)) {
                       MessageList(
                           conversationID = conversationID,
                           onUserClick = { userID ->
                               // Handle user avatar click
                           }
                       )
                   }
                   // MessageInput
                   MessageInput(
                       conversationID = conversationID,
                       modifier = Modifier.navigationBarsPadding()
                   )
               }
           }
       }
   }
运行效果示意图：
﻿
更多实践
您可以本地 运行 Chat Demo 源码，探索更多的界面实现。
联系我们
如果您在接入或使用过程中有任何疑问或者建议，欢迎 联系我们 提交反馈。