HarmonyOS NEXT體驗官#聊天UI效果與簡單AI接口調用
鴻蒙發展的真快呀，半年前還在用api9，現在直接api12了。下載新的模擬機時發現，DevEcoStudio都從3.1下載到了現在的5.0了，這算不算見證了它的成長呢，哈哈。
想嘗試簡單寫一個聊天頁面調用模型，嘗試下語法方面有什么變化，然后發現很簡單的聊天UI，盡然會有這么多坑，害！話不多說開干！
一、滾動聊天區域
想想一個聊天區域無非就是一個滾動列表判斷一下然后彈性布局左右對齊，太簡單了，使用Scroll這個可滾動的容器組件，將消息列表遍歷一下，單獨定義消息的左右對齊，完事！
這時出現了第一個不好控制的效果，當對話少無法占滿滾動區域大小盡然是默認居中！
當子組件的布局尺寸超過父組件的尺寸時，內容才可以滾動，翻了會官網文檔沒找到Scroll內元素向上對齊的方法。
只好動用空空的腦袋想一想了：
- 對話少時，子組件的布局尺寸小于父組件的尺寸無法滾動，默認居中對齊。
- 對話多時超過父組件的尺寸可以滾動，滾動是不是就能上對齊了！
想到就干：設置子組件最小長度為Scroll容器長度。
.constraintSize({minHeight:"100%"})
可以！（可以是可以哈，后續一個bug，好像就這樣玩出來的 TAT )。
// 聊天內容區域
Scroll() {
Column(){
ForEach(this.messages, (item: message) => {
Flex({justifyContent: item.role === 'user' ? FlexAlign.End : FlexAlign.Start}) {
if (item.role === 'user') {
ItemComponent(item, true) // 自己發送的消息
} else {
ItemComponent(item, false) // 對方發送的消息
}
}
})
}
.constraintSize({minHeight:"100%"}) // 設置子組件最小長度為Scroll容器長度
}
.width("100%")
.height("90%")
.scrollBar(BarState.Off)二、消息左右對齊與傳輸數據格式
1、消息如何設置左右對齊
是我的消息我就放右邊，不是我的就放左邊，判斷判斷。
這里可以用if非常好，那就簡單了，來個參數告訴我這條消息是不是自己的，然后：
- Flex布局容器 里面用三目運算符設置對齊方式，可以吧。
- 頭像左右不好控制用if控制其顯示，是不是很方便。
最后就是顏色，大小，樣式的調整了，沒啥美感就這樣了，開擺。
//渲染消息
@Builder
function ItemComponent(item: message, isSelf: boolean) {
Flex({ justifyContent:isSelf ? FlexAlign.End : FlexAlign.Start}) {
if(!isSelf) {
Image($r("app.media.chatbot"))
.width("50vp")
}
Text(item.content)
.fontSize(16)
.lineHeight(24)
.backgroundColor(isSelf ? '#ffdddd' : '#ddffdd') // 根據發送者設置背景色
.padding({ top: 8, bottom: 8, left: 10, right: 10 })
.borderRadius(10)
.textAlign(TextAlign.Start)
.constraintSize({maxWidth: "240vp"}) // 設置最大寬度
if(isSelf) {
Image($r("app.media.me"))
.width("50vp")
}
}
.margin({ top: 4, bottom: 4 }) // 消息間距
}2、傳輸數據格式
- 因為要知道是誰發的消息就記錄了一下角色，對比了一下QQ，想到昵稱盡然沒有，等待后續加工中…
- 寫到json格式的數據，需要取返回消息的一個值，HarmonyOS next不在支持any了，語法檢查有點嚴格哈，只好自定義類型了。
需要哪個字段定義哪個好像也行，偷懶不可取哦。 - 因為接口調用要將全部上下文消息整體發送過去，所以定義了個messages數組，還可以forearch展示用的也是這個數組。
// 發送的每條消息類型
class message{
role: string; // 發送角色
content: string; // 發送的消息
// 如有更多需求，如：發消息人物昵稱，可進行相應的設計
constructor(role: string, content: string) {
this.role = role
this.content = content
}
}
// 根據ai反回的數據類型定義的接口類型，next不支持any類型
interface userInfo{
id: string,
object: string,
created: string,
result: string
is_truncated: boolean,
need_clear_history: boolean,
finish_reason: string
}
// @State數據與頁面雙向數據綁定，當消息增加時頁面刷新顯示
@State messages: Array<message> = [
new message("user","你好"),
new message("assistant", "你好，請問有什么我可以幫助你的嗎？無論你有什么問題或需要幫助，我都會盡力回答和協助你。請隨時告訴我你的需求。")
];三、輸入框和發送
這里有個bug很難受，各位大佬，求評論，救救 TAT。
一個輸入框，一個按鈕發送，用預覽器調試挺方便的，然后到了模擬機有個叫 鍵盤 的東東沒考慮到。
這個東西盡然會把，消息給頂上去！消息少時就輸入鍵盤一跳出來就白白了 (看不到消息了)。
研究了一下微信，消息少時輸入時消息是頂格的，消息多時輸入消息看到的最下放時最新消息，也就滾動到了看的見最下方。
嘗試解決：
- 翻動我’‘可愛’'的官方文檔 找到一個叫 Scroller 的可滾動容器組件的控制器，當它按下時，獲取當前消息區域滾動條的位置，當它抬起時，讓它回到按下時的位置，無效
- 搜索其他語言解決辦法：vue聊天頁面在進入之后信息滑動到底部位置 然后還是翻動我’‘可愛’'的官方文檔，不知道該怎么搜索，沒找到相應的函數
- 求救
// 可滾動的容器組件，當子組件的布局尺寸超過父組件的尺寸時，內容可以滾動。
myScroll: Scroller = new Scroller();
locat: OffsetResult = {xOffset: 0, yOffset: 0};
// 輸入框和發送按鈕
Row() {
TextInput({ text: this.inputText, placeholder: '輸入你想詢問的問題' })
.height(40)
.width("70%")
.onChange((val) => {
this.inputText = val
})
.margin({right: 2})
.onClick(() => {
this.locat = this.myScroll.currentOffset();
})
.onEditChange((isEditing) => {
if(isEditing) {
this.myScroll.scrollTo(this.locat);
}
})
Button('發送')
.onClick(() => {
// 發送消息并更新UI
this.messages.push(new message("user", this.inputText))
this.inputText = ''
getTake(this.messages, this.token).then((response: AxiosResponse<userInfo>) =>{
let text = response.data.result
this.messages.push(new message("assistant", text))
})
})
}
.justifyContent(FlexAlign.Center)
.height("10%")四、AI接口調用
這個我會，我會使用axios，突然想到新版不知道能不能用，證明結果：axios已經適配鴻蒙HarmonyOS NEXT。
OpenHarmony三方庫中心倉 axios。
import axios, {AxiosResponse} from '@ohos/axios'這里調用的是文興一言模型，要調用什么ai可查看其開發文檔。
const apiKey = "xxxxxx"
const secret = "xxxxxxxxxxx"
// 根據apikey和secret獲取token
export function get_access_token(){
return axios.post(`/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secret}`)
}
// 根據token和所有消息發送一次請求，獲取結果
export function getTake(messages: Array<message>, token: string): Promise<AxiosResponse>{
const params = JSON.stringify({
messages: messages
})
return axios.post(`/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=${token}`, params)
}同時HarmonyOS next 內置了很多AI服務哦。
如：textToSpeech (文本轉語音) import { textToSpeech } from '@kit.CoreSpeechKit'; objectDetection（多目標識別）import { visionBase, objectDetection } from '@kit.CoreVisionKit;等。
具體查看官方文檔：AI | 華為開發者聯盟 (huawei.com)
五、總結
果然手搓UI界面得：先設計，懂布局。
換句話說：創建UI界面時，首要步驟是進行精心的設計，其次則需要深入理解并掌握布局技巧。
HanmonyOS next入門很簡單，但最好一個產品很不容易，歡迎來一起學習。
最后附上效果圖和源碼地址：
效果圖
目錄結構
源碼地址
源碼：https://atomgit.com/leaf-domain/chatUI。
openharmony最新開發文檔：https://docs.openharmony.cn/pages/v5.0/zh-cn/device-dev/quick-start/quickstart-overview.md。
最新工具：https://developer.huawei.com/consumer/cn/download。
