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

功能介绍：

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

知识点：

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

使用环境：

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

所需权限：

1. 无需权限

效果图：

在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%')
  }
}