目录

案例介绍

本案例将重点介绍新闻应用中两种不同类型的新闻卡片布局实现：主要新闻卡片（大图布局）和普通新闻卡片（小图布局）。通过Flex组件的灵活布局能力，我们将创建视觉层次分明的新闻展示效果。

代码实现

@Entry
@Component
struct NewsCardPage {
  @Builder
  PrimaryNewsCard(item: NewsItem) {
    Flex({ direction: FlexDirection.Column }) {
      // 图片区域
      Image(item.image)
        .width('100%')
        .height(200)
        .objectFit(ImageFit.Cover)
        .borderRadius({ topLeft: 10, topRight: 10 })
      
      // 内容区域
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Text(item.title)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 8 })
        
        Text(item.summary)
          .fontSize(14)
          .fontColor('#666666')
          .margin({ bottom: 10 })
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        
        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Text(item.source)
            .fontSize(12)
            .fontColor('#999999')
          
          Text(item.publishTime)
            .fontSize(12)
            .fontColor('#999999')
        }
        .width('100%')
      }
      .width('100%')
      .padding(15)
    }
    .width('100%')
    .borderRadius(10)
    .backgroundColor(Color.White)
    .margin({ bottom: 10 })
  }

  @Builder
  NormalNewsCard(item: NewsItem) {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      // 内容区域
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Text(item.title)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 8 })
        
        Text(item.summary)
          .fontSize(14)
          .fontColor('#666666')
          .margin({ bottom: 10 })
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        
        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Text(item.source)
            .fontSize(12)
            .fontColor('#999999')
          
          Text(item.publishTime)
            .fontSize(12)
            .fontColor('#999999')
        }
        .width('100%')
      }
      .layoutWeight(1)
      .height('100%')
      .margin({ right: 10 })
      
      // 图片区域
      Image(item.image)
        .width(100)
        .height(80)
        .objectFit(ImageFit.Cover)
        .borderRadius(5)
    }
    .width('100%')
    .padding(15)
    .borderRadius(10)
    .backgroundColor(Color.White)
    .margin({ bottom: 10 })
  }
}

代码详解

1. 主要新闻卡片（PrimaryNewsCard）

主要新闻卡片采用垂直方向的Flex布局：

• 外层Flex设置direction为Column，实现图片在上、内容在下的布局
• 图片区域设置固定高度和圆角，使用objectFit确保图片填充效果
• 内容区域使用嵌套的Flex布局，包含标题、摘要和底部信息
• 底部信息使用水平Flex布局，通过SpaceBetween实现来源和时间的两端对齐

2. 普通新闻卡片（NormalNewsCard）

普通新闻卡片采用水平方向的Flex布局：

• 外层Flex设置justifyContent为SpaceBetween，实现内容和图片的两端对齐
• 内容区域使用垂直Flex布局，设置layoutWeight为1占据主要空间
• 图片区域设置固定宽高，位于卡片右侧
• 保持与主要新闻卡片相同的信息结构，但采用更紧凑的布局

3. 样式处理

两种卡片的共同样式特点：

• 使用白色背景和圆角营造卡片效果
• 设置合适的内边距和外边距确保内容间距
• 文本使用不同的字号和颜色层次
• 图片使用objectFit属性确保展示效果

总结

本案例展示了如何使用Flex组件实现两种不同风格的新闻卡片布局。通过合理的布局嵌套和样式设置，我们创建了既美观又实用的新闻展示界面。这种实现方式不仅适用于新闻应用，也可以应用于其他需要卡片式布局的场景。