鸿蒙UI布局实战 —— 个人中心页面开发

1、前言

接下里我们将开启“鸿蒙UI布局系列”的学习，第一站：学习线性布局（Row/Column）+ 弹性布局（Flex）

在展开学习前，先上一个实战demo——开发一个个人中心页面，示意图如下：

其中需要关注的重点知识有：

1. 如何实现图标按钮左对齐；

2. 如何实现一个渐变色的圆形头像站位图；

3. “关于我们”选项中，左侧图标与文字贴合，右侧图标如何保持右对齐；

4. 底部的“注销登录”按钮如何保持底部对齐。

5. 如何实现循环渲染控制处理重复的选项；

6. 如何实现自定义的按压效果（按压“联系客服”效果演示如下）；

2、实现

下面是实现布局的核心代码，看不懂没关系，未来我们将逐步学习。

请持续关注“鸿蒙UI布局开发系列。”

interface SettingItem {
  img: Resource,
  text: Resource,
}

@Entry
@Component
export default struct UserCenter {
  @State settingItems: Array<SettingItem> = [{
    img: $r('app.media.about_us'),
    text: $r('app.string.page_user_center_about_us')
  }, {
    img: $r('app.media.share_app'),
    text: $r('app.string.page_user_center_share_app')
  }, {
    img: $r('app.media.head_set'),
    text: $r('app.string.page_user_center_contact')
  }, {
    img: $r('app.media.update'),
    text: $r('app.string.page_user_center_update')
  }
  ]

  @Builder buildTopBar() {
    Flex({ direction: FlexDirection.RowReverse, alignContent: FlexAlign.Center }) {
      this.buildSettingBtn()
    }
    .width('100%')
    .height(60)
  }

  @Builder buildSettingBtn() {
    Image($r('app.media.settings'))
      .width(40)
      .height(40)
      .margin({
        right: 10,
        left: 10
      })
      .padding(5)
      .borderRadius(10)
      .stateStyles({
        pressed: {
          .backgroundColor($r('app.color.common_pressed_color'))
        },
        normal: {
          .backgroundColor(Color.Transparent)
        }
      })
  }

  @Builder buildUserAvatar() {
    Column() {
      Image('')
        .borderRadius(50)
        .width(100)
        .height(100)
        .alignSelf(ItemAlign.Center)
        .linearGradient({
          angle: '143deg',
          direction: GradientDirection.Bottom,
          colors: [['rgba(146, 224, 255, 0.7)', 0.15], ['#90E2FF', 0.18], ['rgba(246, 144, 255, 0.7)', 0.85]]
        })

      Text('Harmony自习室')
        .alignSelf(ItemAlign.Center)
        .margin({ top: 21 })
        .fontWeight('bold')
        .fontSize(24)
    }.width('100%')
  }

  @Builder buildLogout() {
    Flex() {
      Button($r('app.string.page_user_center_logout'))
        .borderRadius(24)
        .width('100%')
        .backgroundColor('#F9E8EE')
        .fontColor('#E47792')
    }.width('100%')
    .padding({
      left: 52,
      right: 52,
      bottom: 20,
    })
  }

  @Builder buildContentList() {
    Column() {
      ForEach(this.settingItems, (item: SettingItem) => {
        Row() {
          Image(item.img)
            .width($r('app.float.setting_list_icon_size'))
            .height($r('app.float.setting_list_icon_size'))
            .margin({ right: 15 })
          Text(item.text)
            .fontSize($r('app.float.setting_list_icon_size'))
            .lineHeight($r('app.float.setting_list_icon_size'))
            .fontColor('#3D3D3D')
            .fontWeight(500)
          Blank()
          Image($r('app.media.right'))
            .width($r('app.float.setting_list_icon_size'))
            .height($r('app.float.setting_list_icon_size'))
            .alignSelf(ItemAlign.End)
        }.width('100%')
        .padding({ top: 15, bottom: 15, left: 10, right: 10 })
        .margin({top: 10})
        .stateStyles({
          pressed: { .borderRadius(20).backgroundColor($r('app.color.common_pressed_color'))
          },
          normal: { .backgroundColor(Color.Transparent)
          }
        })
      })
    }
    .flexGrow(1)
    .width('100%')
    .padding(10)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      this.buildTopBar();
      this.buildUserAvatar();
      this.buildContentList();
      this.buildLogout();
    }
    .padding({
      top: $r('app.float.default_toolbar_top_padding')
    })
    .height('100%')
  }
}