目录

案例介绍

本案例将介绍如何使用RelativeContainer组件实现卡片的基础UI布局。我们将实现卡片的标题、内容、图片等基本元素的布局，并确保它们能够根据内容自动调整位置和大小。

代码实现

@Builder
CardItem(card: {
  id: string,
  title: string,
  content: string,
  tags: string[],
  imageUrl?: Resource,
  likes: number,
  comments: number
}) {
  RelativeContainer() {
    // 卡片标题
    Text(card.title)
      .fontSize(18)
      .fontWeight(FontWeight.Medium)
      .fontColor('#333333')
      .maxLines(2)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .id('title')
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        right: { anchor: '__container__', align: HorizontalAlign.End }
      })
      .margin({ top: 16, left: 16, right: 16 })
    
    // 卡片内容
    Text(card.content)
      .fontSize(14)
      .fontColor('#666666')
      .maxLines(3)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .id('content')
      .alignRules({
        top: { anchor: 'title', align: VerticalAlign.Bottom },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        right: card.imageUrl ? { anchor: 'image', align: HorizontalAlign.Start } : { anchor: '__container__', align: HorizontalAlign.End }
      })
      .margin({ top: 8, left: 16, right: card.imageUrl ? 12 : 16 })
    
    // 卡片图片（如果有）
    if (card.imageUrl) {
      Image(card.imageUrl)
        .width(120)
        .height(90)
        .objectFit(ImageFit.Cover)
        .borderRadius(8)
        .id('image')
        .alignRules({
          top: { anchor: 'title', align: VerticalAlign.Bottom },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        })
        .margin({ top: 8, right: 16 })
    }
  }
  .width('100%')
  .backgroundColor('#FFFFFF')
  .borderRadius(12)
  .shadow({
    radius: 6,
    color: '#1A000000',
    offsetX: 0,
    offsetY: 2
  })
}

代码详解

1. 卡片容器设置

RelativeContainer()
  .width('100%')
  .backgroundColor('#FFFFFF')
  .borderRadius(12)
  .shadow({
    radius: 6,
    color: '#1A000000',
    offsetX: 0,
    offsetY: 2
  })

容器样式特点：

1. 使用RelativeContainer作为根容器，支持元素相对定位
2. 设置白色背景和圆角边框
3. 添加阴影效果提升视觉层次感

2. 标题组件实现

Text(card.title)
  .fontSize(18)
  .fontWeight(FontWeight.Medium)
  .fontColor('#333333')
  .maxLines(2)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .id('title')
  .alignRules({
    top: { anchor: '__container__', align: VerticalAlign.Top },
    left: { anchor: '__container__', align: HorizontalAlign.Start },
    right: { anchor: '__container__', align: HorizontalAlign.End }
  })
  .margin({ top: 16, left: 16, right: 16 })

标题组件特点：

1. 设置合适的字体大小和粗细
2. 限制最大行数为2行，超出显示省略号
3. 通过alignRules设置相对位置：
   • 顶部对齐容器顶部
   • 左右两侧对齐容器边缘

3. 内容组件实现

Text(card.content)
  .fontSize(14)
  .fontColor('#666666')
  .maxLines(3)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .id('content')
  .alignRules({
    top: { anchor: 'title', align: VerticalAlign.Bottom },
    left: { anchor: '__container__', align: HorizontalAlign.Start },
    right: card.imageUrl ? { anchor: 'image', align: HorizontalAlign.Start } : { anchor: '__container__', align: HorizontalAlign.End }
  })
  .margin({ top: 8, left: 16, right: card.imageUrl ? 12 : 16 })

内容组件特点：

1. 使用较小的字体和浅色文字
2. 限制最大行数为3行
3. 位置规则：
   • 顶部对齐标题底部
   • 左侧对齐容器
   • 右侧根据是否有图片动态调整

4. 图片组件实现

if (card.imageUrl) {
  Image(card.imageUrl)
    .width(120)
    .height(90)
    .objectFit(ImageFit.Cover)
    .borderRadius(8)
    .id('image')
    .alignRules({
      top: { anchor: 'title', align: VerticalAlign.Bottom },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .margin({ top: 8, right: 16 })
}

图片组件特点：

1. 条件渲染，只在有图片时显示
2. 固定尺寸和圆角
3. 使用objectFit确保图片填充效果
4. 位置规则：
   • 顶部对齐标题底部
   • 右侧对齐容器

总结

本文通过使用RelativeContainer组件实现了卡片的基础UI布局，展示了如何构建一个灵活且美观的卡片展示效果。通过合理设置容器的背景、圆角和阴影，提升了视觉层次感。利用alignRules属性，精确控制标题、内容和图片等元素的位置关系，实现了自适应的文本显示和图片布局。同时，通过条件渲染和动态调整样式，确保了卡片在不同数据情况下的适应性。这种基础UI实现为后续添加标签、互动功能等高级特性提供了坚实的基础，同时也为其他类似卡片布局的设计提供了参考。