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

🌟使用ArkTS开发鸿蒙应用：公司列表页面的实现

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

代码解析

1. 导入模块

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

导入了多个模块，用于实现HTTP请求、提示框、公司模型和路由跳转等功能。

2. 定义公司列表组件

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

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 }); } }); }

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

3. 页面布局

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%") }

使用​​Column​​ 和​​Row​​ 布局组件，构建公司列表页面的UI。 包含一个标题栏，显示“公司”字样。 使用​​List​​ 和​​ForEach​​ 组件，遍历​​companyModel​​，为每个公司生成一个列表项。 每个列表项包含公司logo、公司名称、公司类型、公司规模、员工数量和公司简介。 点击列表项时，使用​​router.pushUrl​​ 跳转到公司详情页，并传递公司ID作为参数。

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

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

}

export class CompanyData{ id:string=""; logo:string=""; name:string=""; location:string=""; type:string=""; size:string=""; employee:string=""; hot:string=""; count:string=""; inc:string=""; }

总结

通过上述代码，我们实现了一个完整的公司列表页面，包括公司信息的展示和点击跳转到公司详情页的功能。用户可以通过公司列表页面查看各个公司的基本信息，并通过点击进入公司详情页获取更多详细信息。