HarmonyOS 身份信息demo

参考demo

const LIST_SPACE: number = 16; // 列表默认间隔
const LAYOUT_WEIGHT: number = 1; // 自动分配剩余空间
@Observed
class SettingMenu {
  public id: string; // 唯一id
  public image: Resource; // 菜单图标
  public text: string; // 菜单文本
  public content: string;
  public type: number;
  constructor(id: string, image: Resource, text: string, content: string, type: number) {
    this.id = id;
    this.image = image;
    this.text = text;
    this.content = content;
    this.type = type;
  }
}
@Component
export struct SettingItemView {
  private image: string | Resource = ''; // 功能菜单图标
  private text: string | Resource = ''; // 功能菜单文本
  private content: string = '';
  private type: number = 0; // 功能菜单文本
  build() {
    Row() {
      Row() {
        Text(this.text)
          .fontSize(16)
          .fontColor("#99182431")
          .margin({ left: 12 })
          .layoutWeight(LAYOUT_WEIGHT)
          .lineHeight(22)
          .width('50%')
        if (this.type == 1) {
          Image(this.image)
            .width(40)
            .height(40)
            .align(Alignment.Start)// .opacity($r('app.float.setting_menu_arrow_opacity'))
            .objectFit(ImageFit.Contain)
        } else if (this.type == 2) {
          Text(this.content)
            .fontSize(14)
            .fontColor("#99182431")
            .layoutWeight(LAYOUT_WEIGHT)
            .margin({ left: 70 })
            .lineHeight(22)
            .textAlign(TextAlign.Center)
        } else {
          TextInput({ placeholder: '请填写' })
            .fontSize(14)
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 14 })
            .fontColor(Color.Grey)
            .margin({ left: 70 })
            .layoutWeight(LAYOUT_WEIGHT)
            .backgroundColor(Color.White)
            .textAlign(TextAlign.Center)
        }
      }
      .width("100%")
      .height(48)
      .padding({
        left: 12,
        right: 12
      })
      .alignItems(VerticalAlign.Center)
    }
    .width("100%")
    .height(48)
    .alignSelf(ItemAlign.Center)
  }
}
@Entry
@Component
struct PersonalSet {
  @State basicMenuGroup: SettingMenu[] = [
    new SettingMenu('album', $r('app.media.ic_album'), '头像', '', 1),
    new SettingMenu('collection', $r('app.media.ic_album'), '昵称', '沉默是金', 2),
    new SettingMenu('wallet', $r('app.media.ic_album'), '姓名', '', 0),
    new SettingMenu('card', $r('app.media.ic_album'), '身份证号', '', 0),
    new SettingMenu('年龄', $r('app.media.ic_album'), '年龄', '', 0),
    new SettingMenu('性别', $r('app.media.ic_album'), '性别', '女', 2),
    new SettingMenu('地区', $r('app.media.ic_album'), '地区', '', 0)
  ]; // 基础功能分组
  @State otherMenuGroup: SettingMenu[] = [
    new SettingMenu('学历', $r('app.media.ic_album'), '学历', '', 0),
    new SettingMenu('职业', $r('app.media.ic_album'), '职业', '', 0),
    new SettingMenu('爱好', $r('app.media.ic_album'), '爱好', '', 0)
  ]; // 其他功能分组
  build() {
    Column() {
      Row() {
        Text('个人资料')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .lineHeight(33)
          .fontColor("#182431")
          .fontFamily("HarmonyHeiTi")
          .height(33)
          .textAlign(TextAlign.Center)
          .width("100%")
      }
      .width("100%")
      .height(56)
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Center)
      .backgroundColor(Color.White)
      .backgroundImageSize({
        width: "100%",
        height: 97
      })
      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(Color.Green)
      }
      .backgroundColor('#F1F3F5')
      .width("100%")
      .height("100%")
      .padding({
        left: 12,
        right: 12
      })
      .alignItems(HorizontalAlign.Center)
      .height('90%')
    }
    .width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.