目录

案例介绍

本案例将介绍如何设计一个灵活的卡片布局系统的数据模型。我们将实现一个支持自适应高度、图片展示、标签系统以及互动功能的卡片组件，适用于信息展示、新闻列表、商品展示等多种场景。

代码实现

@Entry
@Component
struct CardLayoutExample {
  // 卡片数据模型定义
  private cardData: Array<{
    id: string,
    title: string,
    content: string,
    tags: string[],
    imageUrl?: Resource,
    likes: number,
    comments: number
  }> = [
    {
      id: 'card1',
      title: '探索HarmonyOS NEXT的设计理念',
      content: 'HarmonyOS NEXT是华为自主研发的操作系统，采用了分布式技术架构，支持多设备协同工作。它的设计理念是以用户为中心，打造全场景智慧体验。',
      tags: ['操作系统', '华为', '技术'],
      imageUrl: $r('app.media.card_image1'),
      likes: 256,
      comments: 48
    },
    {
      id: 'card2',
      title: 'ArkTS语言基础入门',
      content: 'ArkTS是HarmonyOS的开发语言，它基于TypeScript进行了扩展，增加了声明式UI、状态管理等特性，使开发更加高效。',
      tags: ['编程语言', 'ArkTS', '入门'],
      likes: 189,
      comments: 32
    },
    {
      id: 'card3',
      title: '组件化开发实践',
      content: '组件化是现代前端开发的重要思想，它可以提高代码复用率，降低维护成本。在HarmonyOS中，我们可以通过自定义组件来实现UI的组件化。',
      tags: ['组件化', '开发', '实践'],
      imageUrl: $r('app.media.card_image2'),
      likes: 145,
      comments: 27
    }
  ]

  build() {
    Column() {
      // 页面标题
      Text('文章卡片列表')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 16 })
      
      // 卡片列表容器
      List() {
        ForEach(this.cardData, (card) => {
          ListItem() {
            // 卡片内容将在后续实现
          }
          .margin({ bottom: 16 })
        })
      }
      .width('100%')
      .layoutWeight(1)
      .padding({ left: 16, right: 16 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

代码详解

1. 数据模型设计

private cardData: Array<{
  id: string,        // 卡片唯一标识
  title: string,     // 卡片标题
  content: string,   // 卡片内容
  tags: string[],    // 标签数组
  imageUrl?: Resource, // 可选的图片资源
  likes: number,     // 点赞数
  comments: number   // 评论数
}>

数据模型设计考虑了以下几个方面：

1. 使用TypeScript接口定义清晰的数据结构
2. 包含必要的展示信息：标题、内容、标签
3. 支持可选的图片展示
4. 包含社交互动数据：点赞数、评论数

2. 列表容器结构

List() {
  ForEach(this.cardData, (card) => {
    ListItem() {
      // 卡片内容将在后续实现
    }
    .margin({ bottom: 16 })
  })
}
.width('100%')
.layoutWeight(1)
.padding({ left: 16, right: 16 })

列表容器的设计特点：

1. 使用List组件作为卡片的容器，支持滚动
2. 通过ForEach循环渲染卡片数据
3. 设置合适的间距和内边距
4. 使用layoutWeight(1)使列表占据剩余空间

3. 页面布局结构

Column() {
  Text('文章卡片列表')
    .fontSize(24)
    .fontWeight(FontWeight.Bold)
    .margin({ top: 20, bottom: 16 })
  
  // 列表容器
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5')

整体布局特点：

1. 使用Column作为根容器，实现垂直布局
2. 顶部显示页面标题
3. 设置适当的背景色和间距

总结

本文通过设计一个灵活的卡片布局系统的数据模型，展示了如何为信息展示、新闻列表、商品展示等多种场景构建高效且可扩展的UI组件。通过定义清晰的数据结构，卡片模型支持文本、图片、标签和互动功能，满足多样化的内容展示需求。利用List和ForEach组件实现高效的列表渲染，结合清晰的页面层级结构，为后续的UI布局和交互功能开发奠定了坚实的基础。这种设计不仅提高了代码的复用性和可维护性，还为实现丰富多样的卡片样式提供了灵活性。