如何使用ArkTS编写一个HarmonyOS原生聊天UI框架。

567 篇文章 5 订阅
555 篇文章 0 订阅

简介

ChatUI ,是一个ArkTS编写的HarmonyOS原生聊天UI框架,提供了开箱即用的聊天对话组件。

下载安装

ohpm install @changwei/chatui

OpenHarmony ohpm 环境配置等更多内容。

接口和属性列表

接口列表

接口参数功能
setTyping(isTyping)isTyping:布尔值显示/隐藏消息加载动画
postMessage(msg,clearInput)msg:ChatMessage类型
clearInput: boolean类型。
在对话界面中显示消息
指示展示消息时是否清空输入框内容,默认清除。
submitUserInput(userIputText)userIputText:string类型。触发Chat组件用户发送消息事件
onSendMessage(callback)callback:(ctl,message)=>void用户发送输入消息回调事件
onClear(callback)callback:(event)=>void用户清空聊天记录回调事件

属性列表

属性描述
messages聊天消息列表,IChatDataSource类型。支持懒加载显示的数据源
botAvatarchatbot头像(可选)。Resource类型
userAvatar我的头像(可选)。Resource类型
title标题栏标题。string类型
needTitleBar是否显示标题栏。boolean类型
welcomeMessagechatbot默认欢迎语。string类型
botMessageBackgroundColorchatbot消息的背景颜色。string类型
botMessageTextColorchatbot消息的文本颜色。string类型
userMessageBackgroundColor用户消息的背景颜色。string类型
userMessageTextColor用户消息的文本颜色。string类型
messageFontSize消息文本的字体大小。number类型
needBackButton是否显示顶部返回按钮。点击返回导航上一页。boolean类型
needInputControl是否需要底部输入区域。 boolean类型
InputControl底部输入区域,@BuilderParams类型。该区域可自定义为你自己的布局
controller自定义输入控制器,自定义输入区时必填。[ChatController](chatui/src/main/ets/components/Chat.ets · Codex/ChatUI - Gitee.com)类型
backIcon返回按钮图标。Resource类型
clearChatIcon清楚聊天按钮图标。Resource类型
submitButtonText提交消息按钮文本。string类型
inputTextPlaceHolder输入框提示文本。string类型
inputTextPlaceHolderColor输入框提示文本的颜色。string类型
inputTextColor输入文本的颜色。string类型
needSubmitButton是否显示提交消息按钮。boolean类型
useMarkdown是否渲染markdown消息。boolean类型

使用示例

这里演示简单的调用ChatUI组件
import { Chat, ChatRole, ChatMessage } from '@changwei/chatui'

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Chat({
          title:'demo chatbot',
          welcomeMessage: '我是你的测试bot',
          onSendMessage: (ctl, message) => {
            //发送用户消息
            ctl.postMessage(message)
            //显示回复等待动画
            ctl.setTyping(true)
            //3秒后发送chatbot响应消息
            setTimeout(() => {
              ctl.postMessage(new ChatMessage({
                role: ChatRole.Assistant,
                content: '这是一条测试回复'
              }))
              // 图片消息
              ctl.postMessage(new ChatMessage({
                role:ChatRole.Assistant,
                picurl:"https://foruda.gitee.com/avatar/1709712450038093632/8548349_changweizhang_1709712449.png"
              }));
            }, 3000)
          }
        })
      }
}
.height('100%')
}
}
深度定制聊天UI。替换输入区域为你自己的输入组件,替换头像,文本颜色等。
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 = false
  chatController = new ChatController()

  build() {
    Row() {
      Column() {
        Chat({
          title: 'demo chatbot',
          needTitleBar: true,
          welcomeMessage: '我是你的测试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) => {
            //发送用户消息
            ctl.postMessage(message)
            this.userInput = ''
            //显示回复等待动画
            ctl.setTyping(true)
            //3秒后发送chatbot响应消息
            setTimeout(() => {
              ctl.postMessage(new ChatMessage({role:ChatRole.Assistant, content:'这是一条测试回复'}))
            }, 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(); // 获取传递过来的参数对象
      if(params) {
        this.needBackButton = params['needBackButton']
      }
    }
}
使用Markdown格式显示消息
 Chat({useMarkdown:true})

markdown消息效果请看上面的demo gif

约束与限制

在下述版本验证通过: DevEco Studio: 4.0.0.600, SDK: API9

贡献代码

使用过程中发现任何问题都可以提Issue 给我 。

开源协议

本项目基于 MIT ,请自由地享受和参与开源。

最后

随着鸿蒙开发越来越火热,我了解到现在有很多小伙伴想入行鸿蒙,但又不知道学习哪些鸿蒙开发技术?所以我给大家整理了一份鸿蒙Next全套VIP学习资料

资料包含了:【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

有需要的小伙伴自行领取:获取完整版方式请点击→《 鸿蒙Next全套VIP学习资料

1.鸿蒙核心技术学习路线

2.大厂面试必问面试题

3.鸿蒙南向开发技术

 4.鸿蒙APP开发必备

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

这份全套完整版的学习资料已经全部打包好,朋友们如果需要可以点击鸿蒙Next全套VIP学习资料:免费领取(安全链接,放心点击

  • 13
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值