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

小_铁

发布于 2025-2-23 11:23

浏览

0收藏

🌟使用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<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
        });
      }
    });
  }

定义了一个名为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<CompanyData>=[];

}

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