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

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

定义了一个名为​​BaseWidget​​ 的基础组件，用于展示功能项。 使用​​Flex​​ 布局容器，组织功能项的图标和标题。 设置了默认的图标路径和标题字符串。

总结

通过上述代码，我们实现了一个完整的个人中心页面，包括用户信息展示、功能列表和点击跳转等功能。用户可以通过个人中心页面查看个人信息，并通过功能列表访问不同的功能模块。