Harmonyos Development (7) : Implementation of the Company List Page

#harmonyosnext

Developing a Company List Page with ArkTS

Here's a complete implementation of a company list page using ArkTS for HarmonyOS apps. This page displays company information and allows users to navigate to company details.

Code Explanation

1. Import Modules

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

We've imported several modules for HTTP requests, prompt actions, company data models, and routing functionality.

2. Define Company List Component

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

Created a CompanyList component
Used @State to define companyModel for storing company list data
Defined companyurl for the API endpoint
In the aboutToAppear lifecycle method, fetch company data using httpRequestGet and update companyModel or show error messages

3. Page Layout

build() {
  Column() {
    Row() {
      Text("Company")
        .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%")
}

Used Column and Row components to build the UI
Created a header showing "Company"
Used List and ForEach components to iterate over companyModel and generate list items
Each list item displays company logo, name, type, size, employee count, and description
Implemented click events to navigate to company details page with company ID as parameter

4. CompanyModel: Provides Type Safety and Structured Data Handling

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