HarmonyOS Next 办公应用：个人资料设置页面开发（二）

3. 个人资料设置页面组件

@Entry
@Component
export struct PersonalSet {
  @Consume('pageInfos') pageInfos: NavPathStack;

  @State basicMenuGroup: SettingMenu[] = [
    new SettingMenu('album', $r('app.media.mi_people'), '头像', '', 1),
    new SettingMenu('collection', $r('app.media.mi_people'), '昵称', '沉默是金', 2),
    new SettingMenu('wallet', $r('app.media.mi_people'), '姓名', '', 0),
    new SettingMenu('card', $r('app.media.mi_people'), '身份证号', '', 0),
    new SettingMenu('年龄', $r('app.media.mi_people'), '年龄', '', 0),
    new SettingMenu('性别', $r('app.media.mi_people'), '性别', '女', 2),
    new SettingMenu('地区', $r('app.media.mi_people'), '地区', '', 0)
  ]; 
  @State otherMenuGroup: SettingMenu[] = [
    new SettingMenu('学历', $r('app.media.mi_people'), '学历', '', 0),
    new SettingMenu('职业', $r('app.media.mi_people'), '职业', '', 0),
    new SettingMenu('爱好', $r('app.media.mi_people'), '爱好', '', 0)
  ]; 
  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Top }){
        //状态栏颜色
        Row(){}
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
        .width('100%')
        .height((AppStorage.get('statusHeight')))
        .backgroundColor(Color.Black)
        Column() {
          Row() {
            Text('个人资料')
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .lineHeight(30)
              .fontColor(Color.White)
              .height(33)
              .textAlign(TextAlign.Center)
              .width('100%')
          }
          .width('100%')
          .height(44)
          .justifyContent(FlexAlign.Start)
          .alignItems(VerticalAlign.Center)
          .backgroundColor(Color.Black)

          Column() {
            List() {
              ListItem() {
                // 创建基础功能分组
                Row() {
                  List() {
                    ForEach(this.basicMenuGroup,
                      (item: SettingMenu) => {
                        ListItem() {
                          SettingItemView({
                            image: item.image,
                            text: item.text,
                            content: item.content,
                            type: item.type
                          })
                        }
                      },
                      (item: SettingMenu) => item.id.toString())
                  }
                  .height(345)
                  .divider({
                    strokeWidth: 1,
                    color: '#0c000000',
                    startMargin: 46,
                    endMargin: 24
                  })
                }
                .height(350)
                .alignItems(VerticalAlign.Center)
                .margin({ bottom: 12 })
                .borderRadius(24)
                .backgroundColor('#FFFFFF')
              }

              ListItem() {
                // 创建其他功能分组
                List({ space: LIST_SPACE }) {
                  ForEach(this.otherMenuGroup,
                    (item: SettingMenu) => {
                      ListItem() {
                        SettingItemView({ image: item.image, text: item.text })
                      }
                      .height(56)
                      .borderRadius(24)
                      .backgroundColor('#FFFFFF')
                    },
                    (item: SettingMenu) => item.id.toString())
                }
              }
            }
            .layoutWeight(LAYOUT_WEIGHT)
            .margin({ top: 10 })

            Button('保存').width('100%').backgroundColor('#ff1b0b64')
              .onClick(() =>{
                this.pageInfos.clear()
              })
          }
          .backgroundColor('#F1F3F5')
          .width('100%')
          .height('100%')
          .padding({
            left: 12,
            right: 12
          })
          .alignItems(HorizontalAlign.Center)
          .height('90%')
        }
        .width('100%').height('100%')
      }
    }.hideTitleBar(true)
  }
}

PersonalSet 组件是个人资料设置页面的核心。它定义了基础功能分组和其他功能分组，使用 List 和 ForEach 动态渲染菜单项。点击“保存”按钮时，调用 pageInfos.clear() 清除导航栈。

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个个人资料设置页面。该页面通过定义数据模型、菜单项视图组件和页面组件，实现了个人信息的展示和编辑功能。开发者可以根据实际需求，进一步扩展该页面，如添加数据保存逻辑、验证输入内容等，以满足更多办公场景的需求。