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

🚀 使用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 = []; 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=[] code:number=0 }

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

}

总结

通过上述代码，我们实现了一个完整的消息列表页面