目录

案例介绍

本篇文章将介绍如何实现个人资料卡片的高级功能部分，包括关注按钮、数据统计区域和底部操作栏等交互功能的实现。

代码实现

// 关注按钮
Button(this.isFollowed ? '已关注' : '关注')
  .width(100)
  .height(36)
  .fontSize(16)
  .fontColor(this.isFollowed ? '#666666' : '#FFFFFF')
  .backgroundColor(this.isFollowed ? '#F0F0F0' : '#3478F6')
  .borderRadius(18)
  .id('follow_btn')
  .alignRules({
    top: { anchor: 'company', align: VerticalAlign.Bottom },
    left: { anchor: '__container__', align: HorizontalAlign.Center }
  })
  .margin({ top: 16 })
  .onClick(() => {
    this.isFollowed = !this.isFollowed
  })

// 数据统计区域
Row() {
  // 粉丝数
  Column() {
    Text(this.userData.followers.toString())
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
    
    Text('粉丝')
      .fontSize(14)
      .fontColor('#666666')
      .margin({ top: 4 })
  }
  .layoutWeight(1)
  .alignItems(HorizontalAlign.Center)
  
  // 分割线
  Divider()
    .vertical(true)
    .height(40)
    .color('#EEEEEE')
  
  // 关注数
  Column() {
    Text(this.userData.following.toString())
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
    
    Text('关注')
      .fontSize(14)
      .fontColor('#666666')
      .margin({ top: 4 })
  }
  .layoutWeight(1)
  .alignItems(HorizontalAlign.Center)
  
  // 分割线
  Divider()
    .vertical(true)
    .height(40)
    .color('#EEEEEE')
  
  // 文章数
  Column() {
    Text(this.userData.posts.toString())
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
    
    Text('文章')
      .fontSize(14)
      .fontColor('#666666')
      .margin({ top: 4 })
  }
  .layoutWeight(1)
  .alignItems(HorizontalAlign.Center)
}
.width('90%')
.padding({ top: 16, bottom: 16 })
.border({ width: 1, color: '#EEEEEE', radius: 12 })
.id('stats')
.alignRules({
  top: { anchor: 'follow_btn', align: VerticalAlign.Bottom },
  left: { anchor: '__container__', align: HorizontalAlign.Center }
})
.margin({ top: 24 })

// 底部操作栏
Row() {
  Button() {
    Image($r('app.media.message_icon'))
      .width(24)
      .height(24)
    
    Text('发消息')
      .fontSize(14)
      .fontColor('#3478F6')
      .margin({ left: 8 })
  }
  .backgroundColor('#F0F8FF')
  .borderRadius(20)
  .height(40)
  .padding({ left: 16, right: 16 })
  
  Blank()
  
  Button() {
    Image($r('app.media.share_icon'))
      .width(24)
      .height(24)
    
    Text('分享')
      .fontSize(14)
      .fontColor('#3478F6')
      .margin({ left: 8 })
  }
  .backgroundColor('#F0F8FF')
  .borderRadius(20)
  .height(40)
  .padding({ left: 16, right: 16 })
}
.width('90%')
.id('bottom_bar')
.alignRules({
  top: { anchor: 'bio_content', align: VerticalAlign.Bottom },
  left: { anchor: '__container__', align: HorizontalAlign.Center },
  bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
})
.margin({ top: 24, bottom: 16 })

代码详解

1. 关注按钮实现

关注按钮的关键实现点：

• 根据isFollowed状态动态改变按钮文本和样式
• 点击事件切换关注状态
• 使用alignRules定位在公司信息下方

2. 数据统计区域

数据统计区域的实现要点：

• 使用Row和Column组合实现三列布局
• layoutWeight(1)实现均分布局
• Divider组件添加垂直分割线
• 统一的文本样式和间距

3. 底部操作栏

底部操作栏的实现特点：

• 使用Row实现左右布局
• Blank()组件实现弹性间距
• 按钮内部使用Image和Text组合
• 统一的按钮样式和间距

4. 布局关系

各组件之间的布局关系：

• 关注按钮相对于公司信息定位
• 数据统计区域相对于关注按钮定位
• 底部操作栏相对于个人简介和容器底部定位

总结

本文通过实现个人资料卡片的高级功能，展示了如何在HarmonyOS应用中构建具有交互性的复杂界面。通过合理使用状态管理（如关注按钮的动态样式切换），实现了用户交互功能。同时，灵活运用Row、Column、RelativeContainer等布局组件，实现了数据统计区域和底部操作栏的复杂布局。在设计中，特别注意了组件间的间距、对齐关系以及视觉风格的统一性，确保了界面的美观性和用户体验。这些实现为个人资料卡片的功能扩展和界面优化提供了良好的示范。