OpenHarmony开发者论坛

标题: OpenHarmony个人信息页面制作 [打印本页]

---

作者: 俺也不知道叫啥名字好听    时间: 2024-12-29 19:57
标题: OpenHarmony个人信息页面制作
[md]#### OpenHarmony个人信息页面制作

---

#### 简介

---

个人信息页面是一个重要的界面，用于记录并展示一个人的基本信息和其他相关信息。


#### 页面内容

---

**基本身份信息**：包括姓名、性别、年龄、出生日期等。

1. **联系方式**：如电话号码、电子邮箱和社交媒体账号等，这些联系方式有助于人们与个人进行更直接的沟通和联系。
2. **验证码登录**：记录了个人的专业技能和特长，有助于人们了解个人在某些领域的专业能力和专长。
3. **登录功能实现**：实现用户登录程序

#### 项目效果图

---



#### 代码实现

---

```
import Context from '@ohos.app.ability.common';
import CommonUtils from '../common/utils/CommonUtils';
import {CommonConstants} from '../common/constants/CommonConstants';
import TextInputWidget from '../view/TextInputWidget';
import TextCommonWidget from '../view/TextCommonWidget';
import CustomDialogWidget from '../view/CustomDialogWidget';
import Logger from '../common/utils/Logger';

@Entry
@Component
struct PersonalInformation {
  @State birthdate: string = '';
  @State sex: string = '';
  @State hobbies: string = '';
  private sexArray: Resource = $r('app.strarray.sex_array');
  customDialogController: CustomDialogController = new CustomDialogController({
   builder: CustomDialogWidget({
     hobbies: $hobbies,
   }),
   alignment: DialogAlignment.Bottom,
   customStyle: true,
   offset: {
     dx: 0,
     dy: CommonConstants.DY_OFFSET
   }
  });

  aboutToAppear() {
   let date = new Date();
   let year = date.getFullYear();
   let month = date.getMonth() + CommonConstants.PLUS_ONE;
   let day = date.getDate();
   this.birthdate = CommonUtils.getBirthDateValue(year, month, day);
   let context = getContext(this);
   if ((CommonUtils.isEmpty(context)) || (CommonUtils.isEmpty(context.resourceManager))) {
     Logger.error(CommonConstants.TAG_HOME, 'context or resourceManager is null');
     return;
   }
   let manager = context.resourceManager;
   manager.getStringValue($r('app.string.default_sex').id, (error, sexValue) => {
     if (!CommonUtils.isEmpty(error)) {
       Logger.error(CommonConstants.TAG_HOME, 'error = ' + JSON.stringify(error));
     } else {
       this.sex = sexValue;
     }
   });
  }

  build() {
   Column() {
     Image($r('app.media.ic_back'))
       .width($r('app.float.image_back_size'))
       .height($r('app.float.image_back_size'))
       .alignSelf(ItemAlign.Start)
       .margin({
         left: CommonConstants.BACK_MARGIN_LEFT,
         top: CommonConstants.BACK_MARGIN_TOP
       })
       .onClick(() => {
         let context = getContext(this) as Context.UIAbilityContext;
         CommonUtils.alertDialog(context);
       })
     Image($r('app.media.ic_avatar'))
       .width($r('app.float.avatar_size'))
       .height($r('app.float.avatar_size'))
       .alignSelf(ItemAlign.Center)
       .margin({ top: CommonConstants.AVATAR_MARGIN_TOP })
     Text($r('app.string.text_personal_title'))
       .fontColor(Color.Black)
       .fontSize($r('app.float.personal_font_size'))
       .margin({ top: CommonConstants.PERSONAL_MARGIN_TOP })
       .alignSelf(ItemAlign.Center)
     TextInputWidget({
       inputImage: $r('app.media.ic_nickname'),
       hintText: $r('app.string.text_input_hint')
     })
     TextCommonWidget({
       textImage: $r('app.media.ic_birthdate'),
       title: $r('app.string.title_birthdate'),
       content: $birthdate,
       onItemClick: () => {
         CommonUtils.datePickerDialog((birthValue: string) => {
           this.birthdate = birthValue;
         });
       }
     })
     TextCommonWidget({
       textImage: $r('app.media.ic_sex'),
       title: $r('app.string.title_sex'),
       content: $sex,
       onItemClick: () => {
         CommonUtils.textPickerDialog(this.sexArray, (sexValue: string) => {
           this.sex = sexValue;
         });
       }
     })
     TextInputWidget({
       inputImage: $r('app.media.ic_signature'),
       hintText: $r('app.string.text_input_signature')
     })
     TextCommonWidget({
       textImage: $r('app.media.ic_hobbies'),
       title: $r('app.string.title_hobbies'),
       content: $hobbies,
       onItemClick: () => {
         this.customDialogController.open();
       }
     })
   }
   .backgroundColor($r('app.color.column_background_color'))
   .width(CommonConstants.FULL_WIDTH)
   .height(CommonConstants.FULL_HEIGHT)
  }
}
```
[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5