鸿蒙应用开发-仿微信消息对话列表-编程知识

鸿蒙应用开发-仿微信消息对话列表

功能介绍：

仿微信消息对话列表，显示发送文本和接收文本，参考文档创建列表。

知识点：

熟悉对List控件的使用。
熟悉对Text控制定义，如修改边框等。
手动控制列表的跳转。
动态添加列表数据。
使用构造函数初始化数据。

使用环境：

API 9
DevEco Studio 4.0 Release
Windows 11
Stage模型
ArkTS语言

所需权限：

无需权限

效果图：

在这里插入图片描述

在src/main/ets/model/Msg.ets中，定义消息的结构：

// 消息类型，分别是发送和接收
export const TYPE_RECEIVED = 0;
export const TYPE_SENT = 1;export class Msg {content: string;type: number;constructor(content: string, type: number) {this.content = content;this.type = type;}
}

src/main/ets/model/MsgDataSource.ets编写的是对列表的操作，如添加数据、获取列表大小，通过操作这个对象，控制列表显示。

import { Msg } from './Msg';export class MsgDataSource implements IDataSource {private listeners: DataChangeListener[] = [];private listData = new Array<Msg>();constructor() {this.addData(new Msg('你好，你叫什么名字', 0))this.addData(new Msg('主人你好，我是你的AI助手', 1))this.addData(new Msg('今天天气怎么样', 0))this.addData(new Msg('今天天气晴朗', 1))}public totalCount(): number {return this.listData.length;}public getData(index: number): Msg {return this.listData[index];}public addData(msg: Msg): void {// this.listData.push()this.listData = this.listData.concat(msg);this.notifyDataAdd(this.listData.length - 1);}registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {this.listeners.push(listener);}}unregisterDataChangeListener(listener: DataChangeListener): void {const position = this.listeners.indexOf(listener);if (position >= 0) {this.listeners.splice(position, 1);}}notifyDataAdd(index: number): void {this.listeners.forEach((listener: DataChangeListener) => {listener.onDataAdd(index);})}notifyDataChange(index: number): void {this.listeners.forEach((listener: DataChangeListener) => {listener.onDataChange(index);})}
}

页面代码：

import { Msg, TYPE_SENT } from '../model/Msg';
import { MsgDataSource } from '../model/MsgDataSource';@Entry
@Component
struct Index {@Provide msgListData: MsgDataSource = new MsgDataSource();private listScroller: Scroller = new Scroller();build() {Column() {Scroll() {Column() {Row() {List({ space: 16, scroller: this.listScroller }) {LazyForEach(this.msgListData, (item: Msg) => {ListItem() {Column() {if (item?.type == TYPE_SENT) {Column() {Text(item?.content).border({ width: 1, color: Color.Black, radius: 10 }).padding(10).backgroundColor(Color.Yellow)}.width('100%').alignItems(HorizontalAlign.Start)} else {Column() {Text(item?.content).border({ width: 1, color: Color.Black, radius: 10 }).padding(10).backgroundColor(Color.Pink)}.width('100%').alignItems(HorizontalAlign.End)}}.width('100%')}})}.width('95%').height('100%')}.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Top).padding({ top: 10, bottom: 10 }).width('100%').height('100%')}.width('100%')}.scrollBar(BarState.Off).width('100%').height('90%')Row() {Button('添加数据').width('100%').margin({ bottom: 10 }).onClick(() => {let myDate: Date = new Date()let content = `现在是：${myDate.getHours()}时${myDate.getMinutes()}分${myDate.getSeconds()}秒`this.msgListData.addData(new Msg('现在几点了？', 0))this.msgListData.addData(new Msg(content, 1))this.listScroller.scrollToIndex(this.msgListData.totalCount() - 1)})}.height('10%').width('100%').alignItems(VerticalAlign.Bottom)}.width('100%').height('100%')}
}