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

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

@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
        });
      }
    });
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

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%")
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

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="";


}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.