Harmonyos Development (10) : Implementation of the Personal Center Page

#harmonyosnext

Developing a Personal Center Page with ArkTS

Here's a complete implementation of a personal center page using ArkTS for HarmonyOS apps. This page allows users to view and manage their personal information.

Code Explanation

1. Import Modules

import { BaseWidget } from './MyBaseWidget';
import prompt from '@ohos.promptAction';
import { router } from '@kit.ArkUI';

We've imported several modules for custom components, prompt actions, and routing functionality.

2. Define Personal Center Component

@Component
export default struct My {
  build() {
    Navigation() {
      List() {
        ListItem() {
          Flex({ direction: FlexDirection.Column }) {
            Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
              Flex({ direction: FlexDirection.Row }) {
                Image($r('app.media.icon1'))
                  .width(65).height(65)
                  .borderRadius(8)
                Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
                  Text("Clannad")
                    .fontSize(19).fontWeight(700)
                  Text("Currently employed, not considering new opportunities")
                    .fontSize(17).fontColor(Color.Gray).margin({ top: 13 })
                }.margin({ left: 15 }).height(65)
              }
            }
            Button("+Status")
              .fontColor(Color.Gray)
              .margin({ left: 80, top: 5 })
              .width(70)
              .height(30)
              .borderWidth(1)
              .borderColor('rgb(237, 237, 237)')
              .backgroundColor(Color.White)
          }.backgroundColor(Color.White)
        }

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_service'), titleString: "Experience New Version" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 10 })
        .onClick(() => {
          prompt.showToast({
            message: 'Coming Soon'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_collect'), titleString: "My Micro Resume" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 10 })
        .onClick(() => {
          prompt.showToast({
            message: 'Coming Soon'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_moment'), titleString: "Attachment Resume" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: 'Coming Soon'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_card'), titleString: "Manage Job Intentions" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: 'Coming Soon'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_emoj'), titleString: "Improve Resume Ranking" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: 'Coming Soon'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.release'), titleString: "Post Job Information" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          router.pushUrl({
            url: "pages/PostaPosition"
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_set'), titleString: "Settings" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: 'Coming Soon'
          });
        });
      }.width("100%").height("100%")
        .backgroundColor('rgb(237, 237, 237)')
    }.width("100%")
    .height("100%")
    .backgroundColor(Color.White)
  }
}

Created a My component for the personal center
Used Navigation and List to build the UI
Displayed user information including avatar, nickname, and status
Implemented ListItemGroup and ListItem to show feature lists
Each feature item includes an icon and title
Click events show toast messages or navigate to other pages

3. Define BaseWidget Component

@Component
export struct BaseWidget {
  imagePath: Resource = $r('app.media.icon2');
  titleString: string = 'Default Title';

  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
        Image(this.imagePath)
          .width(22)
          .height(22)
        Text(this.titleString)
          .fontSize(17)
          .margin({ left: 10 })
      }.height(50)
      Image($r('app.media.arrow_right'))
        .height(20)
        .width(20)
    }.height(50)
    .padding({ left: 12, right: 12 })
  }
}