簡(jiǎn)介

ChatUI，是一個(gè)ArkTS編寫的HarmonyOS原生聊天UI框架，提供了開箱即用的聊天對(duì)話組件。

下載安裝

ohpm install @changwei/chatui

OpenHarmony ohpm 環(huán)境配置等更多內(nèi)容，請(qǐng)參考如何安裝 OpenHarmony ohpm 包

接口和屬性列表

接口列表

接口	參數(shù)	功能
setTyping(isTyping)	isTyping：布爾值	顯示/隱藏消息加載動(dòng)畫
postMessage(msg,clearInput)	msg：ChatMessage類型
clearInput: boolean類型。	在對(duì)話界面中顯示消息
指示展示消息時(shí)是否清空輸入框內(nèi)容，默認(rèn)清除。
submitUserInput(userIputText)	userIputText：string類型。	觸發(fā)Chat組件用戶發(fā)送消息事件
onSendMessage(callback)	callback:(ctl,message)=>void	用戶發(fā)送輸入消息回調(diào)事件
onClear(callback)	callback:(event)=>void	用戶清空聊天記錄回調(diào)事件

屬性列表

屬性	描述
messages	聊天消息列表，IChatDataSource類型。支持懶加載顯示的數(shù)據(jù)源
botAvatar	chatbot頭像（可選）。Resource類型
userAvatar	我的頭像（可選）。Resource類型
title	標(biāo)題欄標(biāo)題。string類型
needTitleBar	是否顯示標(biāo)題欄。boolean類型
welcomeMessage	chatbot默認(rèn)歡迎語。string類型
botMessageBackgroundColor	chatbot消息的背景顏色。string類型
botMessageTextColor	chatbot消息的文本顏色。string類型
userMessageBackgroundColor	用戶消息的背景顏色。string類型
userMessageTextColor	用戶消息的文本顏色。string類型
messageFontSize	消息文本的字體大小。number類型
needBackButton	是否顯示頂部返回按鈕。點(diǎn)擊返回導(dǎo)航上一頁。boolean類型
needInputControl	是否需要底部輸入?yún)^(qū)域。 boolean類型
InputControl	底部輸入?yún)^(qū)域，@BuilderParams類型。該區(qū)域可自定義為你自己的布局
controller	自定義輸入控制器，自定義輸入?yún)^(qū)時(shí)必填。[ChatController](chatui/src/main/ets/components/Chat.ets · Codex/ChatUI - Gitee.com)類型
backIcon	返回按鈕圖標(biāo)。Resource類型
clearChatIcon	清楚聊天按鈕圖標(biāo)。Resource類型
submitButtonText	提交消息按鈕文本。string類型
inputTextPlaceHolder	輸入框提示文本。string類型
inputTextPlaceHolderColor	輸入框提示文本的顏色。string類型
inputTextColor	輸入文本的顏色。string類型
needSubmitButton	是否顯示提交消息按鈕。boolean類型
useMarkdown	是否渲染markdown消息。boolean類型

使用示例

這里演示簡(jiǎn)單的調(diào)用ChatUI組件

import { Chat, ChatRole, ChatMessage } from '@changwei/chatui'@Entry
@Component
struct Index {build() {Row() {Column() {Chat({title:'demo chatbot',welcomeMessage: '我是你的測(cè)試bot',onSendMessage: (ctl, message) => {//發(fā)送用戶消息ctl.postMessage(message)//顯示回復(fù)等待動(dòng)畫ctl.setTyping(true)//3秒后發(fā)送chatbot響應(yīng)消息setTimeout(() => {ctl.postMessage(new ChatMessage({role: ChatRole.Assistant,content: '這是一條測(cè)試回復(fù)'}))// 圖片消息ctl.postMessage(new ChatMessage({role:ChatRole.Assistant,picurl:"https://foruda.gitee.com/avatar/1709712450038093632/8548349_changweizhang_1709712449.png"}));}, 3000)}})}
}
.height('100%')
}
}

深度定制聊天UI。替換輸入?yún)^(qū)域?yàn)槟阕约旱妮斎虢M件，替換頭像，文本顏色等。

import { Chat, ChatRole, ChatMessage } from '@changwei/chatui'
import { ChatController } from '@changwei/chatui'
import router from '@ohos.router';@Entry
@Component
struct CustomInput {@State userInput: string = ''@State needBackButton: boolean = falsechatController = new ChatController()build() {Row() {Column() {Chat({title: 'demo chatbot',needTitleBar: true,welcomeMessage: '我是你的測(cè)試bot',botMessageBackgroundColor: Color.Brown,botMessageTextColor: Color.White,userMessageBackgroundColor: Color.Green,userMessageTextColor: Color.White,botAvatar:$r('app.media.chat'),messageFontSize: 20,userInput: this.userInput,controller: this.chatController,needBackButton:this.needBackButton,onSendMessage: (ctl, message) => {//發(fā)送用戶消息ctl.postMessage(message)this.userInput = ''//顯示回復(fù)等待動(dòng)畫ctl.setTyping(true)//3秒后發(fā)送chatbot響應(yīng)消息setTimeout(() => {ctl.postMessage(new ChatMessage({role:ChatRole.Assistant, content:'這是一條測(cè)試回復(fù)'}))}, 3000)}}){Row() {Button() {Image($r('app.media.app_icon'))}.backgroundColor('#').height('40').width('40').margin(5)TextInput({text: this.userInput}).enterKeyType(EnterKeyType.Send).fontColor(Color.White).backgroundColor(Color.Blue).width('80%').onChange((val) => {this.userInput = val}).onSubmit((ss) => {this.chatController.submitUserInput(this.userInput)})}}}}.height('100%')}aboutToAppear() {const params = router.getParams(); // 獲取傳遞過來的參數(shù)對(duì)象if(params) {this.needBackButton = params['needBackButton']}}
}

使用Markdown格式顯示消息

 Chat({useMarkdown:true})

markdown消息效果請(qǐng)看上面的demo gif

約束與限制

在下述版本驗(yàn)證通過： DevEco Studio: 4.0.0.600, SDK: API9

為了能讓大家更好的學(xué)習(xí)鴻蒙（HarmonyOS NEXT）開發(fā)技術(shù)，這邊特意整理了《鴻蒙開發(fā)學(xué)習(xí)手冊(cè)》（共計(jì)890頁），希望對(duì)大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙開發(fā)學(xué)習(xí)手冊(cè)》：

如何快速入門：https://qr21.cn/FV7h05

1. 基本概念
2. 構(gòu)建第一個(gè)ArkTS應(yīng)用
3. ……

開發(fā)基礎(chǔ)知識(shí)：https://qr21.cn/FV7h05

1. 應(yīng)用基礎(chǔ)知識(shí)
2. 配置文件
3. 應(yīng)用數(shù)據(jù)管理
4. 應(yīng)用安全管理
5. 應(yīng)用隱私保護(hù)
6. 三方應(yīng)用調(diào)用管控機(jī)制
7. 資源分類與訪問
8. 學(xué)習(xí)ArkTS語言
9. ……

基于ArkTS 開發(fā)：https://qr21.cn/FV7h05

1. Ability開發(fā)
2. UI開發(fā)
3. 公共事件與通知
4. 窗口管理
5. 媒體
6. 安全
7. 網(wǎng)絡(luò)與鏈接
8. 電話服務(wù)
9. 數(shù)據(jù)管理
10. 后臺(tái)任務(wù)(Background Task)管理
11. 設(shè)備管理
12. 設(shè)備使用信息統(tǒng)計(jì)
13. DFX
14. 國(guó)際化開發(fā)
15. 折疊屏系列
16. ……

鴻蒙開發(fā)面試真題（含參考答案）：https://qr18.cn/F781PH

鴻蒙開發(fā)面試大盤集篇（共計(jì)319頁）：https://qr18.cn/F781PH

1.項(xiàng)目開發(fā)必備面試題
2.性能優(yōu)化方向
3.架構(gòu)方向
4.鴻蒙開發(fā)系統(tǒng)底層方向
5.鴻蒙音視頻開發(fā)方向
6.鴻蒙車載開發(fā)方向
7.鴻蒙南向開發(fā)方向