一、介绍
基于鸿蒙Next模拟一个ai对话过程
二、场景需求
客户服务、数据分析、个性化推荐、图像和视频处理、智能家居、交通管理、教育行业、制造等等。
三、业务步骤
第一步：输入框提出问题，发送问题，
第二步：下次发送，先清除之前提问，避免重复提问
第三步：获取ai反馈相关问题答案，目前虚拟数据，可自行设置答案结果
四、效果展示
五：代码展示：
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl'
import picker from '@ohos.file.picker'
import common from '@ohos.app.ability.common'
import promptAction from '@ohos.promptAction'
let context = getContext(this) as common.UIAbilityContext
let permissionList: Permissions[] = [
'ohos.permission.READ_MEDIA',
'ohos.permission.MEDIA_LOCATION'
]
@Entry
@Component
struct Index {
@State img:string = "/common/images/img_up.png" //初始化图片
@State scanHeight:number = 0 // 扫描高度-都动画
@State isVisibility:boolean = false // 扫描框显隐控制
//获取本地图片路径
getLocalPicPath() {
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select({
MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
maxSelectNumber: 1
},
(err, photoPickerValue) => {
if (err) {
console.info("photoPicker_err:" + err.message)
return
}
console.info("photoPicker_Value:" + photoPickerValue.photoUris)
this.img = photoPickerValue.photoUris[0].toString()
}
)
}
//相册权限获取
isAuthorize() {
let AtManager = abilityAccessCtrl.createAtManager();
AtManager.requestPermissionsFromUser(context, permissionList)
.then((data) => {
console.info('request permissions from user success：' + data.authResults)
this.getLocalPicPath() //获取本地路径
})
.catch((err:Error) => {
console.info('request permissions from user failed：', JSON.stringify(err) ?? '')
});
}
//弹窗动画，识别图片内容
scanAnimation(){
let numT = 1
let timer = setInterval(()=>{
numT--
if (numT == 0){
this.isVisibility = false
this.scanHeight = 0
}
if (numT == -1){
promptAction.showDialog({
message:"键盘",
buttons:[
{
text:"确定",
color:"0x0091FF"
}
]
})
clearInterval(timer)
}
},1000)
}
build(){
Column(){
//图片框
Stack(){
//上传图片框
Column(){
Image(this.img).width("100%").height("100%")
}.width(240)
.height(240)
.borderWidth(2)
.borderColor(0xB5E5FF)
.borderRadius(8)
//扫描框
Column(){
}.width(240)
.height(this.scanHeight)
.borderWidth({ bottom:1 })
.borderColor(0x0091FF)
.visibility(this.isVisibility ? Visibility.Visible:Visibility.Hidden)
.animation({
duration:1000,
tempo:1,
curve:Curve.Linear,
iterations:1,
})
}.width(245)
.height(245)
.alignContent(Alignment.Top)
//上传图片
Text("上传图片")
.width(120)
.height(40)
.fontSize(16)
.fontColor(0xffffff)
.fontWeight(600)
.borderRadius(4)
.textAlign(TextAlign.Center)
.stateStyles({
normal:{.backgroundColor(0x0091FF)},
pressed:{.backgroundColor(0x0091DD)}
})
.margin({top:20,bottom:10})
.onClick(()=>this.isAuthorize())
//扫一扫
Text("扫一扫")
.width(120)
.height(40)
.fontSize(16)
.fontColor(0xffffff)
.fontWeight(600)
.borderRadius(4)
.textAlign(TextAlign.Center)
.stateStyles({
normal:{.backgroundColor(0x0091FF)},
pressed:{.backgroundColor(0x0091DD)}
})
.onClick(()=>{
this.isVisibility = !this.isVisibility //控制扫描组件显隐
if (this.isVisibility) {
this.scanHeight = 240 // 高度等于stack组件高度
this.scanAnimation() //弹窗动画，识别图片内容
}else {
this.scanHeight = 0 // 高度等于0
}
})
}.height("100%")
.width("100%")
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
六、代码结构及原理：
1.整体结构：
使用了ArkTS的装饰器语法，如@Entry和@Component组件。使用了ArkTS的渲染语法if/else等
2.状态管理：
组件使用@State装饰器定义了几个响应式状态变量,如btnInputShow这些变量的变化会自动触发UI的更新。
3.UI结构：
界面使用嵌套的Column和Row组件构建。使用了ForEach遍历循环数据信息。
4.数据传递：
当点击"发送"按钮时,会调用HidingHeadVerseFun（）回调函数,先获取用户问题数据，然后在数据库中对比，调用Search_HidingHeadVerseFun（）回调函数，获取答案数据信息。
总的来说,这段代码展示了如何使用ArkTS和ArkUI框架创建一个交互式的ai问答界面。它利用了声明式UI、响应式编程和组件化的概念,使得代码结构清晰,易于理解和维护。
