鸿蒙开发(七)：公司列表页面的实现 原创

import { httpRequestGet } from '../Utils/HttpUtils';
import prompt from '@ohos.promptAction';
import { CompanyModel, CompanyData } from '../model/CompanyModel';
import { router } from '@kit.ArkUI';
1.
2.
3.
4.

@Entry
@Component
export struct CompanyList {
  @State companyModel: Array<CompanyData> = [];

  private companyurl: string = "****";

  async aboutToAppear() {
    httpRequestGet(this.companyurl).then((data) => {
      let companyLists: CompanyModel = JSON.parse(data.toString());
      let msg = companyLists.msg;
      if (companyLists.code == 200) {
        this.companyModel = companyLists.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.
20.

build() {
  Column() {
    Row() {
      Text("公司")
        .fontSize(20)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
    }.width("100%")
    .height(40)
    .backgroundColor(Color.Green)
    .justifyContent(FlexAlign.Center)

    List({ space: 15 }) {
      ForEach(this.companyModel, (item: CompanyData) => {
        ListItem() {
          Row() {
            Image(item.logo)
              .height(100)
              .width("100%")
              .layoutWeight(3)
              .borderRadius(10)
              .objectFit(ImageFit.Cover)
            Column() {
              Text(item.name)
                .fontWeight(800)
                .fontSize(20)
                .width("100%")
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis })

              Text(`${item.type} · ${item.size} · ${item.employee}`)
                .fontSize(14)
                .fontWeight(600)
                .fontColor('#333')

              Text(item.inc)
                .width('100%')
                .fontSize(14)
                .margin({ left: 12, top: 6 })
                .textOverflow({ overflow: TextOverflow.Ellipsis })
            }.height(100)
            .layoutWeight(7)
            .justifyContent(FlexAlign.Start)
            .alignItems(HorizontalAlign.Start)
            .onClick(() => {
              router.pushUrl({
                url: "pages/Companydetails",
                params: {
                  id: item.id
                }
              });
            })
          }.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.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

export  class  CompanyModel{
  msg:string="";
  code:number=0;
  data:Array<CompanyData>=[];

}

export  class  CompanyData{
  id:string="";
  logo:string="";
  name:string="";
  location:string="";
  type:string="";
  size:string="";
  employee:string="";
  hot:string="";
  count:string="";
  inc:string="";
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.