目录

案例介绍

本篇文章将介绍如何使用RelativeContainer组件实现个人资料卡片的基础UI部分，包括背景卡片、顶部背景、头像和用户信息等基本元素的布局。

代码实现

build() {
  Column() {
    // 标题栏
    Row() {
      Text('个人资料')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height(56)
    .padding({ left: 16, right: 16 })
    .backgroundColor('#FFFFFF')
    
    // 个人资料卡片
    RelativeContainer() {
      // 背景卡片
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor('#FFFFFF')
        .borderRadius(16)
        .id('background')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
      
      // 顶部背景
      Column()
        .width('100%')
        .height(80)
        .backgroundColor('#3478F6')
        .borderRadius({ topLeft: 16, topRight: 16 })
        .id('top_bg')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
      
      // 头像
      Image(this.userData.avatar)
        .width(100)
        .height(100)
        .borderRadius(50)
        .border({ width: 4, color: '#FFFFFF' })
        .id('avatar')
        .alignRules({
          top: { anchor: 'top_bg', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .translate({ y: -50 })
      
      // 用户名
      Text(this.userData.name)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .id('username')
        .alignRules({
          top: { anchor: 'avatar', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      
      // 职位
      Text(this.userData.title)
        .fontSize(16)
        .fontColor('#666666')
        .id('title')
        .alignRules({
          top: { anchor: 'username', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .margin({ top: 4 })
      
      // 公司
      Text(this.userData.company)
        .fontSize(14)
        .fontColor('#999999')
        .id('company')
        .alignRules({
          top: { anchor: 'title', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .margin({ top: 4 })
    }
    .width('90%')
    .height(580)
    .margin({ top: 16 })
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#F5F5F5')
}

代码详解

1. 整体布局结构

使用Column作为最外层容器，包含两个主要部分：

• 标题栏：使用Row实现
• 个人资料卡片：使用RelativeContainer实现

2. 标题栏实现

Row() {
  Text('个人资料')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
}
.width('100%')
.height(56)
.padding({ left: 16, right: 16 })
.backgroundColor('#FFFFFF')

标题栏采用简洁的设计：

• 固定高度56单位
• 左右padding 16单位
• 白色背景
• 粗体标题文本

3. 卡片背景实现

// 背景卡片
Column()
  .width('100%')
  .height('100%')
  .backgroundColor('#FFFFFF')
  .borderRadius(16)
  .id('background')
  .alignRules({
    top: { anchor: '__container__', align: VerticalAlign.Top },
    left: { anchor: '__container__', align: HorizontalAlign.Start }
  })

// 顶部背景
Column()
  .width('100%')
  .height(80)
  .backgroundColor('#3478F6')
  .borderRadius({ topLeft: 16, topRight: 16 })

背景实现要点：

• 白色主背景，圆角设计
• 蓝色顶部背景，上圆角设计
• 使用alignRules固定位置

4. 头像和用户信息

// 头像
Image(this.userData.avatar)
  .width(100)
  .height(100)
  .borderRadius(50)
  .border({ width: 4, color: '#FFFFFF' })
  .translate({ y: -50 })

// 用户信息
Text(this.userData.name)
  .fontSize(22)
  .fontWeight(FontWeight.Bold)

实现要点：

• 圆形头像，白色边框
• 使用translate实现头像上移效果
• 用户信息采用链式布局
• 文本样式区分主次，合理使用字号和颜色

总结

本文通过使用RelativeContainer组件实现了个人资料卡片的基础UI部分，展示了如何灵活地构建布局并实现美观的视觉效果。通过alignRules属性，组件间的位置关系得以精准定义，确保了布局的灵活性和稳定性。同时，利用translate等属性实现了头像上移等视觉效果，增强了界面的层次感。整体设计注重细节，从圆角、边框到间距的处理，都体现了对用户体验的重视。这种实现方式不仅为个人资料卡片的展示提供了良好的视觉效果，还为后续功能扩展奠定了基础。