一、介紹

基于鴻蒙Next模擬一個(gè)ai對話過程

二内贮、場景需求

客戶服務(wù)、數(shù)據(jù)分析汞斧、個(gè)性化推薦夜郁、圖像和視頻處理、智能家居粘勒、交通管理竞端、教育行業(yè)、制造等等庙睡。

三事富、業(yè)務(wù)步驟

第一步：輸入框提出問題，發(fā)送問題乘陪，

第二步：下次發(fā)送统台，先清除之前提問，避免重復(fù)提問

第三步：獲取ai反饋相關(guān)問題答案啡邑，目前虛擬數(shù)據(jù)贱勃，可自行設(shè)置答案結(jié)果

四、效果展示

4.png

五：代碼展示：

import { MsgRoleEnum } from '../common/CommonConstant'
import { MsgP, textShow } from '../common/MsgPassageway'
import { HidingHeadVerseData } from '../database/HidingHeadVerse'

@Entry
@Component
struct Index02{
  @State textShowArr: MsgP[] = textShow
  @State textMsg: string = ''
  @State inputValue: string = ''//獲取輸入文本數(shù)據(jù)
  @State inputText: string = '' // 輸入框展示文本數(shù)據(jù)
  @State btnMsg: string = "發(fā)送"
  @State btnInputShow: boolean = true // 清除/發(fā)送


  build(){
    Column(){
      List(){
        ForEach(this.textShowArr,(item:MsgP,index:number)=>{
          if (item.role === MsgRoleEnum.Mine) {
            ListItem(){
              Row(){
                //用戶消息
                Row(){
                  Text(item.msg)
                    .fontSize(16)
                    .textAlign(TextAlign.End)
                    .padding(6)
                    .backgroundColor(0xffcbebff)
                    .borderRadius(4)
                }.width("67%")
                .justifyContent(FlexAlign.End)
                //用戶頭像
                Image($r('app.media.ic_user_portrait')).width(30).height(30).margin({left:10,right:10})

              }.width("100%")
              .padding({top:4,bottom:4})
              .justifyContent(FlexAlign.End)
              .alignItems(VerticalAlign.Top)
            }
          }else {
            ListItem(){
              Row(){
                //AI頭像
                Image($r('app.media.ic_gallery_ai_photography_on')).width(30).height(30).margin({left:10,right:10})
                //AI返回消息
                Row(){
                  Text(item.msg + this.textMsg)
                    .fontSize(16)
                    .textAlign(TextAlign.Start)
                    .padding(6)
                    .backgroundColor(0xffffff)
                    .borderRadius(4)
                }.width("67%")
                .justifyContent(FlexAlign.Start)

              }.width("100%")
              .padding({top:4,bottom:4})
              .justifyContent(FlexAlign.Start)
              .alignItems(VerticalAlign.Top)
            }
          }

        },(item:string)=>item)
      }

      Blank()//填充容器組件

      //底部輸入框
      if (this.btnInputShow){
        //底部輸入框
        Row(){
          //輸入框
          TextInput({text:this.inputText,placeholder:"請輸入您的關(guān)鍵詞~"})
            .width("80%")
            .backgroundColor(0x999999)
            .height(40)
            .margin({left:12,right:12})
            .borderRadius(4)
            .backgroundColor(0xeeeeee)
            .onChange((value:string)=>{
              this.inputValue = value
              this.inputText = value
            })
          //發(fā)送圖標(biāo)
          Text(this.btnMsg)
            .margin({right:12})
            .fontColor(0x0091FF)
            .onClick(()=>{
              if (this.btnMsg === "清除"){
                this.textShowArr = []
                this.btnMsg = "發(fā)送"
              }else {
                this.textMsg = ""
                this.HidingHeadVerseFun()
              }

            })
        }.width("100%")
        .height(70)
        .backgroundColor(0xffffff)
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Start)
      }

    }
    .width("100%")
    .height("100%")
    .borderRadius({ bottomLeft:12,bottomRight:12 })
    .backgroundColor(0xeeeeee)
    .justifyContent(FlexAlign.Start)
  }


  HidingHeadVerseFun(){
    if (this.inputValue !== "") {
      this.textShowArr.push({
        role:0,
        msg:this.inputText
      })
      this.inputText = ""
      this.btnMsg = "清除"
      this.Search_HidingHeadVerseFun()
    }else {
      console.info("輸入文本數(shù)據(jù)為空")
    }
  }
  //打字機(jī)效果
  HidingHeadVerseTypewriter(v_idx:number){
    if (v_idx == 999) {
      let strLen = "我還在成長中,試試以下關(guān)鍵詞：時(shí)間的片段谤逼、陌生的信..."
      let idx = 0
      let timer = setInterval(()=>{
        if (idx < strLen.length) {
          this.textMsg += strLen[idx++];
        } else {
          clearInterval(timer);
        }
      },100)
    }else {
      let strLen = HidingHeadVerseData[v_idx].title as string + HidingHeadVerseData[v_idx].content as string
      let idx = 0
      let timer = setInterval(()=>{
        if (idx < strLen.length) {
          this.textMsg += strLen[idx++];
        } else {
          clearInterval(timer);
        }
      },100)
    }
  }

  Search_HidingHeadVerseFun(){
    let searchStr = this.inputValue.includes("時(shí)間的片段") || this.inputValue.includes("時(shí)間")
    let searchStr2 = this.inputValue.includes("陌生的信") || this.inputValue.includes("陌生的信")
    if (searchStr) {
      this.textShowArr.push({
        role: 1,
        msg: ""
      })
      this.HidingHeadVerseTypewriter(0)
    }if (searchStr2){
      this.textShowArr.push({
        role: MsgRoleEnum.Other,
        msg: ""
      })
      this.HidingHeadVerseTypewriter(2)

    } else {
      this.textShowArr.push({
        role: MsgRoleEnum.Other,
        msg: ""
      })
      this.HidingHeadVerseTypewriter(999)
    }
  }

}

六贵扰、代碼結(jié)構(gòu)及原理：
1.整體結(jié)構(gòu)：
使用了ArkTS的裝飾器語法，如@Entry和@Component組件流部。使用了ArkTS的渲染語法if/else等
2.狀態(tài)管理：
組件使用@State裝飾器定義了幾個(gè)響應(yīng)式狀態(tài)變量,如btnInputShow這些變量的變化會自動(dòng)觸發(fā)UI的更新戚绕。
3.UI結(jié)構(gòu)：
界面使用嵌套的Column和Row組件構(gòu)建。使用了ForEach遍歷循環(huán)數(shù)據(jù)信息枝冀。
4.數(shù)據(jù)傳遞：
當(dāng)點(diǎn)擊"發(fā)送"按鈕時(shí),會調(diào)用HidingHeadVerseFun（）回調(diào)函數(shù),先獲取用戶問題數(shù)據(jù)舞丛，然后在數(shù)據(jù)庫中對比，調(diào)用Search_HidingHeadVerseFun（）回調(diào)函數(shù)果漾，獲取答案數(shù)據(jù)信息瓷马。

總的來說,這段代碼展示了如何使用ArkTS和ArkUI框架創(chuàng)建一個(gè)交互式的ai問答界面。它利用了聲明式UI跨晴、響應(yīng)式編程和組件化的概念,使得代碼結(jié)構(gòu)清晰,易于理解和維護(hù)欧聘。