鸿蒙开发(九)：消息列表页面的实现原创

小_铁

发布于 2025-2-23 11:26

浏览

0收藏

🚀 使用ArkTS开发鸿蒙应用：消息列表页面的实现

消息列表页面是用户查看消息的重要功能模块。以下是一个完整的消息列表页面实现，包括消息的展示和点击跳转等功能。

代码解析

1. 导入模块

import { httpRequestGet } from '../Utils/HttpUtils';
import prompt from '@ohos.promptAction';
import { MessageListModel, MessageListModelData } from '../model/MessageListModel';

导入了多个模块，用于实现HTTP请求、提示框和消息模型等功能。

2. 定义消息列表组件

@Entry
@Component
export struct MessageList {
  @State messagelist: Array<MessageListModelData> = [];
  private messageurl: string = "http://42.192.45.45:8080/boss/message/getmessageinfo";

  async aboutToAppear() {
    httpRequestGet(this.messageurl).then((data) => {
      let messageModel: MessageListModel = JSON.parse(data.toString());
      let msg = messageModel.msg;
      if (messageModel.code == 200) {
        this.messagelist = messageModel.data;
      } else {
        prompt.showToast({
          message: msg
        });
      }
    });
  }

定义了一个名为MessageList 的消息列表组件。
使用@State 装饰器定义了messagelist，用于存储消息列表数据。
定义了messageurl，用于存储获取消息信息的接口URL。
在aboutToAppear 生命周期函数中，调用httpRequestGet 方法获取消息列表数据，并根据返回结果更新messagelist 或显示提示信息。

3. 页面布局

build() {
  Column() {
    Row() {
      Text("消息")
        .fontSize(22).fontColor(Color.White)
    }.backgroundColor(Color.Green)
      .width("100%").height(40)
      .justifyContent(FlexAlign.Center)

    List({ space: 15 }) {
      ForEach(this.messagelist, (item: MessageListModelData) => {
        ListItem() {
          Row() {
            Image(item.headportraiturl)
              .width(100).height(100)
              .layoutWeight(3)
              .borderRadius(10)
              .objectFit(ImageFit.Cover)
            Column({ space: 10 }) {
              Text(item.nickname)
                .fontSize(24)
              Text(item.companyname)
                .fontSize(14)
              Text(item.msg)
                .fontSize(16)
            }.width("70%")
              .layoutWeight(7)
              .height("100%")
              .justifyContent(FlexAlign.Start)
              .alignItems(HorizontalAlign.Start)
              .margin({ left: 5 })
          }.width("100%").height(100)
          .justifyContent(FlexAlign.Start)
        }
      })
    }
  }.width("100%").height("100%")
}

使用Column 和Row 布局组件，构建消息列表页面的UI。
包含一个标题栏，显示“消息”字样。
使用List 和ForEach 组件，遍历messagelist，为每条消息生成一个列表项。
每个列表项包含消息发送者的头像、昵称、公司名称和消息内容。

4.MessageListModel：提供类型安全和结构化的数据处理方式


export  class  MessageListModel{
  msg:string=""
  data?:Array<MessageListModelData>=[]
  code:number=0
}

export  class MessageListModelData{
  id:string="";
  msg:string="";
  jobname:string="";
  companyname:string="";
  nickname:string="";
  headportraiturl:string="";


}