【鸿蒙】大模型对话应用（二）：对话界面设计与实现

Demo介绍

本demo对接阿里云和百度的大模型API，实现一个简单的对话应用。

DecEco Studio版本：DevEco Studio 3.1.1 Release

HarmonyOS SDK版本：API9

关键点：ArkTS、ArkUI、UIAbility、网络http请求、列表布局、层叠布局

对话页面设计

参照各种聊天类软件设计，一个简单的对话页面大致可分为三部分：对话框头，对话框，输入框

在src/main/ets/pages目录下新建页面，完成对话页面UI实现；

注意：一定是新建page；新建ets文件或复制已有的page，都会导致页面的路由文件src/main/resources/base/profile/main_pages.json中 无法生成新页面的路由。

@Entry
@Component
struct ChatPage {build() {Row() {Column() {// 1 对话框头headerText("Hello 文心一言")// 2 对话框chatList()// 3 输入框inputBox()}.width('100%')}.height('100%')}
}
@Builder function headerText(title: string) {}@Builder function chatList() {}@Builder function inputBox() {}

对话框头设计实现

使用 @Builder 注解自定义UI结构 headerText

其中仅一个文本组件，文本字体最小20，最大40，文本限制占一行；是为了适配手机竖屏时，字体大小固定可能导致错行或展示异常；

对话框头高度占全屏比为10%

@Builder function headerText(title: string) {Text(title).minFontSize(20).maxFontSize(40).maxLines(1).fontWeight(FontWeight.Bold).height('10%')
}

预览效果：

对话框设计实现

对话框中，每条消息又由：①对话消息、②对话头像，两部分实现

先定义消息体类结构：

• role，消息发起角色;分为我方（MessageRoleEnum.Mine）和对方（MessageRoleEnum.Other）
• message，消息文本

export class MessageVO {role: MessageRoleEnummessage: stringconstructor(role: MessageRoleEnum, message: string) {this.role = rolethis.message = message}
}export enum MessageRoleEnum {// 我方Mine,// 对方Other
}

定义测试数据

import { MessageRoleEnum, MessageVO } from '../model/MessageVO'
class TextTest {static readonly Text: MessageVO[] = [{role: MessageRoleEnum.Mine,message: '请介绍一下你自己'},{role: MessageRoleEnum.Other,message: "我是百度公司开发的人工智能语言模型，我的中文名是文心一言，英文名是ERNIE-Bot，" +"可以协助您完成范围广泛的任务并提供有关各种主题的信息，比如回答问题，提供定义和解释及建议。如果您有任何问题，请随时向我提问。"},{role: MessageRoleEnum.Mine,message: '我在上海，周末可以去哪里玩？'},{role: MessageRoleEnum.Other,message: '上海是一个充满活力和文化氛围的城市，有很多适合周末游玩的地方。以下是几个值得推荐的地方：\n\n1. 上海科技馆：上海科技馆是中国大陆最大的科技馆之一'}]
}

使用列表组件（List）完成布局构建

说明：ArkUI提供了一种轻量的UI元素复用机制@Builder，@Builder所装饰的函数遵循build()函数语法规则，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。

下面代码中chatList 为对话框的UI布局结构；

chatLine_mine 和 chatLine_other 分别为：消息源是自己 和 消息源是对方（大模型）时的UI结构，唯一不同的就是图像在左（对方）还是在右（我方）；

chatLine_image_style 修饰对话框中头像样式；

chatLine_text_style 修饰对话框中消息文本的样式。

@Builder function chatList() {List({space: 15, scroller: this.scroller}) {ForEach(TextTest.Text, (item: MessageVO) => {if (item.role === MessageRoleEnum.Mine) {chatLine_mine(item.message)} else {chatLine_other(item.message)}})}.alignListItem(ListItemAlign.Center).height('80%')
}@Builder function chatLine_mine(msg:string) {Row({space: 5}) {Text(msg).chatLine_text_style()Image($r("app.media.icon")).chatLine_image_style()}.alignItems(VerticalAlign.Top)
}
@Builder function chatLine_other(msg:string) {Row({space: 5}) {Image($r("app.media.icon")).chatLine_image_style()Text(msg).chatLine_text_style()}.alignItems(VerticalAlign.Top)
}@Extend(Image) function chatLine_image_style() {.width(50).aspectRatio(1)
}
@Extend(Text) function chatLine_text_style() {.fontSize(20).fontColor(Color.White).width('70%').lineHeight(25).backgroundColor('rgb(64,64,64)').padding(12).border({radius: 10})
}

预览效果：

输入框设计实现

使用层叠布局（Stack）完成一个简单的输入框；

其中【发送】按钮图标，是一个png格式图片，放在src/main/resources/base/media 目录下；

API9中，输入框组件（TextInput）API不支持原生的 [ 清除输入框文本按钮 ] ，可以使用层叠布局配合TextInput 组件的 text 属性实现。

@Builder function inputBox() {Row() {Stack() {TextInput({placeholder: '有问题尽管问我~'}).height(50).enterKeyType(EnterKeyType.Send)Image($r('app.media.ic_public_send')).margin({right:10}).height(35)}.alignContent(Alignment.End).height('10%')}.width('90%')
}

预览效果：

头像图标为项目创建默认生成的src/main/resources/base/media/icon.png，可自己更换

发送图标可在华为官网图标库获取：HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟

至此，对话的UI页面就构建完成了；

使用相同的步骤，可以构建出相同的两个页面，一个用于和阿里云大模型对话，一个用于和百度云大模型对话。

下一步，可以通过页面跳转或跨Ability调用的方式，从首页进入不同大模型的对话页面；

之后可以通过请求大模型接口，更新页面数据，驱动页面渲染，实现与大模型的对话效果。

参考文档（鸿蒙官方开发指南）：文档中心