前言
代码案例基于Api13。
目前哪个行业最火，非AI莫属，deepseek发布之后，可以说，又把AI推上了一个新高度，在和AI进行询问会话的时候，我们可以发现，AI的回答都是以流式的效果进行展示的，也就是类似于打字机的效果，那么针对这种效果在实际的开发中是如何实现的呢？
具体的效果，根据业务情况而定，有两种模式，一种主动的流式输出，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。
打字机的效果，一般都是在会话聊天之中，也就是列表之中，在实际的开发中，还要兼顾到，流式输出的数据加载是否会影响性能，页面闪烁，最新的聊天信息可展示等问题。
主动的流式输出
在一般的AI会话中，实现一个流式输出，一般会采用SSE或者WebSocket协议，像OpenAI官网，DeepSeek官网是采用SSE协议，当然，在实际的开发中，大家可以选择自己适用的技术即可。客户端发送问题之后，服务端检索到内容，就会时时的返回内容，具体是返回连接式的内容，还是逐字返回，需要和服务端进行定义。连接式返回，客户端只管加载，逐字返回，需要客户端拼接。
@Entry @Component struct Index { @State message?: string = "" intervalID?: number /** *AUTHOR:AbnerMing *INTRODUCE:模拟请求网络接口 */ doHttp(success: (message: string) => void) { let data = "具体的实现效果，根据业务情况而定，有两种模式，一种主动的流式输出，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。" let position: number = 0 //模拟请求流式输出 this.intervalID = setInterval(() => { position = position + 2 let message = data.substring(0, position) if (success != undefined) { success(message) } if (message.length >= data.length) { clearInterval(this.intervalID) } }, 100) } build() { Column() { Button("加载") .margin({ top: 10 }) .onClick(() => { this.doHttp((message: string) => { this.message = message }) }) Text(this.message) .margin({ top: 20 }) .width("100%") }.width("100%") .height("100%") .padding(10) } }
我们可以看下演示的效果，实际的开发中，前端无须关注每次的返回字的长度。
被动的流式展示
所谓的被动，就是在已有数据的情况下，如何实现打字机的效果，这个比较的简单，无非是开启一个定时，以每隔多少时间，输出多少字为主，时间和输出字的长度都可以自己调节，简单案例如下，当然了，这种方式一般很少应用于实际的开发，不过在客户端有类似打字机效果的情况下可以使用。
@Entry @Component struct Index { @State message?: string = "" intervalID?: number build() { Column() { Button("加载") .margin({ top: 10 }) .onClick(() => { this.start() }) Text(this.message) .margin({ top: 20 }) .width("100%") }.width("100%") .height("100%") .padding(10) } private start() { let data = "具体的实现效果，根据业务情况而定，有两种模式，一种主动的流式输出，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。" let position: number = 0 this.intervalID = setInterval(() => { position = position + 2 this.message = data.substring(0, position) if (this.message.length >= data.length) { clearInterval(this.intervalID) } console.log("======定时") }, 100) } }
我们看下输出效果，是不是有那种打字机的效果了，需要注意的是，定时关闭。
列表打印机效果
以上的效果都是以一个Text组件展示的情况，在实际的开发中，更多的是以左右会话形式，这时需要考虑的就多一点，比如会话定位在底部，流式展示时，不让列表闪烁等等问题，那么都是需要考虑的。
下面简单的实现一下聊天会话模式，所有的数据都是模拟的，UI简单的绘制了一下，在实际的开发中，肯定比较精细。
import { KeyboardAvoidMode } from '@kit.ArkUI' @Observed export class MessageBean { leftMessage?: string rightMessage?: string } @Component struct ChatView { @ObjectLink messageBean: MessageBean; build() { Column() { if (this.messageBean.rightMessage != undefined) { Row() { Text(this.messageBean.rightMessage) .margin({ right: 10 }) Image($r("app.media.startIcon")) .id("user_logo") .border({ color: Color.Red, width: 1, radius: 20 }) .width(20) .height(20) }.width("100%") .justifyContent(FlexAlign.End) .padding({ right: 10 }) } else { Row() { Image($r("app.media.startIcon")) .border({ color: Color.Red, width: 1, radius: 20 }) .width(20) .height(20) Text(this.messageBean.leftMessage) .margin({ left: 10 }) }.alignItems(VerticalAlign.Top) .padding({ right: 20 }) } } } } @Entry @Component struct Index { private scroller: Scroller = new Scroller() @State sendMessage: string = "" @State messageList: MessageBean[] = [] intervalID?: number private isEnd: boolean = true aboutToAppear(): void { this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE) } /** *AUTHOR:AbnerMing *INTRODUCE:模拟请求网络接口 */ doHttp(success: (message: string) => void) { let data = "具体的实现效果，根据业务情况而定，有两种模式，一种主动的流式输出，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。" let position: number = 0 //模拟请求流式输出 this.intervalID = setInterval(() => { position = position + 2 let message = data.substring(0, position) if (success != undefined) { success(message) } if (message.length >= data.length) { this.isEnd = true //模拟结束 clearInterval(this.intervalID) } }, 100) } build() { RelativeContainer() { List({ space: 10, scroller: this.scroller }) { ForEach(this.messageList, (item: MessageBean) => { ListItem() { ChatView({ messageBean: item }) } }) }.margin({ top: 10 }) .alignRules({ top: { anchor: "__container__", align: VerticalAlign.Top }, bottom: { anchor: "layout_send", align: VerticalAlign.Top } }) RelativeContainer() { TextInput({ placeholder: "请输入问题" }) .onChange((text) => { this.sendMessage = text }) .alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start }, right: { anchor: "btn_send", align: HorizontalAlign.Start } }) Button("发送") .id("btn_send") .margin({ left: 10 }) .alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End } }).onClick(() => { //发送 if (this.isEnd) { this.isEnd = false let bean = new MessageBean() bean.rightMessage = this.sendMessage this.messageList.push(bean) this.scroller.scrollEdge(Edge.Bottom) //模拟接口返回数据 let leftBean = new MessageBean() this.messageList.push(leftBean) this.doHttp((content) => { leftBean.leftMessage = content }) } }) } .height(40) .id("layout_send") .padding({ left: 10, right: 10 }) .backgroundColor(Color.White) .alignRules({ bottom: { anchor: "__container__", align: VerticalAlign.Bottom } }) }.width("100%") .height("100%") } }
运行之后，我们简单测试一下：
一般会话列表的形式，有一点需要注意，那就是历史记录。
相关总结
需要注意的是，内容一般都是以markdown的形式输出，也就是真实的数据中，内容都是有样式的，比如加粗，图片，表格等等，所以，不能以单一的Text组件进行展示，需要针对markdown文本适配。
打字机的效果，更多的是在服务端的数据输出，客户端，最主要的是针对数据的渲染。
