鸿蒙开发(十)：个人中心页面的实现原创

小_铁

发布于 2025-2-23 11:29

浏览

0收藏

🚀使用ArkTS开发鸿蒙应用：个人中心页面的实现

个人中心页面是用户查看和管理个人信息的重要功能模块。以下是一个完整个人中心页面的实现，包括用户信息展示、功能列表和点击跳转等功能。

代码解析

1. 导入模块

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

导入了多个模块，用于实现自定义组件、提示框和路由跳转等功能。

2. 定义个人中心组件

@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("在职，目前不考虑新机会")
                    .fontSize(17).fontColor(Color.Gray).margin({ top: 13 })
                }.margin({ left: 15 }).height(65)
              }
            }
            Button("+状态")
              .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: "体验新版本" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 10 })
        .onClick(() => {
          prompt.showToast({
            message: '开发中敬请期待'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_collect'), titleString: "我的微简历" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 10 })
        .onClick(() => {
          prompt.showToast({
            message: "开发中敬请期待"
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_moment'), titleString: "附件简历" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: '开发中敬请期待'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_card'), titleString: "管理求职意向" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: '开发中敬请期待'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_emoj'), titleString: "提升简历排名" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: '开发中敬请期待'
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.release'), titleString: "发布职位信息" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          router.pushUrl({
            url: "pages/PostaPosition"
          });
        });

        ListItemGroup() {
          ListItem() {
            BaseWidget({ imagePath: $r('app.media.my_set'), titleString: "设置" })
          }
        }.backgroundColor(Color.White)
        .margin({ top: 5 })
        .onClick(() => {
          prompt.showToast({
            message: '开发中敬请期待'
          });
        });
      }.width("100%").height("100%")
        .backgroundColor('rgb(237, 237, 237)')
    }.width("100%")
    .height("100%")
    .backgroundColor(Color.White)
  }
}

定义了一个名为My 的个人中心组件。
使用Navigation 和List 布局组件，构建个人中心页面的UI。
包含一个用户信息展示区域，显示用户头像、昵称和状态。
使用ListItemGroup 和ListItem 组件，展示功能列表，每个功能项包含一个图标和标题。
点击功能项时，显示提示信息或跳转到相应页面。

3. 定义基础组件 `BaseWidget`

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