资源准备：

需要4张图片：分别是页面图，播放图标，评论图标，更多图标

1.实现效果显示：

2.教学视频：

使用鸿蒙HarmonyOs NEXT 开发b站卡片_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1NGgreVEm2/

3.源码：

@Entry
@Component
struct Index {build() {Column(){Column(){Stack({alignContent:Alignment.Bottom}){Image($r('app.media.harmonyOs')).borderRadius({topLeft:15,topRight:15})Row({space:20}){Row({space:10}){Image($r('app.media.play')).width(20).fillColor(Color.White)Text('520万').fontColor(Color.White)}Row({space:5}){Image($r('app.media.comment')).width(24).fillColor(Color.White)Text('6666').fontColor(Color.White)}Blank()Text('13:14').fontColor(Color.White)}.padding(15).width('100%')}.height(180).width('100%')Column(){Text('使用HarmonyOs NEXT开发B站卡片的HarmonyOs的界面效果').fontSize(22).fontWeight(FontWeight.Bold).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2)Blank()Row(){Text('20万点赞').fontSize(18).backgroundColor('#fff8e4e4').fontColor('#f56027').padding(5).borderRadius(5)Image($r('app.media.more')).width(24)}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height(120).padding(10)}.height(300).width(300).backgroundColor(Color.White).borderRadius(15)}.padding(10).width('100%').height('100%').backgroundColor(Color.Gray)}
}

4.加上注释后的源码

@Entry // 标记这个组件作为页面的入口点
@Component // 标记这个结构为一个组件
struct Index { // 定义一个名为Index的结构体组件build() { // 组件的构建方法Column(){ // 创建一个垂直布局的容器Column(){ // 再次创建一个垂直布局的容器，用于嵌套布局Stack({alignContent:Alignment.Bottom}){ // 创建一个堆叠布局容器，内容对齐到容器的底部Image($r('app.media.harmonyOs')) // 加载一个图片资源，这里是HarmonyOS的图.borderRadius({ // 设置图片的圆角topLeft:15, // 左上角圆角大小topRight:15 // 右上角圆角大小})Row({space:20}){ // 创建一个水平布局的行，子元素之间间隔20Row({space:10}){ // 再次创建一个水平布局的行，用于嵌套布局Image($r('app.media.play')) // 加载一个播放图标的图片资源.width(20) // 设置图片宽度.fillColor(Color.White) // 设置图片填充颜色为白色Text('520万') // 显示播放次数.fontColor(Color.White) // 设置文字颜色为白色}Row({space:5}){ // 创建一个水平布局的行，子元素之间间隔5Image($r('app.media.comment')) // 加载一个评论图标的图片资源.width(24) // 设置图片宽度.fillColor(Color.White) // 设置图片填充颜色为白色Text('6666') // 显示评论数量.fontColor(Color.White) // 设置文字颜色为白色}Blank() // 空白元素，用于占位Text('13:14') // 显示视频时长.fontColor(Color.White) // 设置文字颜色为白色}.padding(15) // 设置内边距.width('100%') // 设置宽度为父容器宽度的100%}.height(180) // 设置堆叠布局容器的高度.width('100%') // 设置宽度为父容器宽度的100%Column(){ // 创建一个垂直布局的容器Text('使用HarmonyOs NEXT开发B站卡片的HarmonyOs的界面效果').fontSize(22) // 设置文字大小.fontWeight(FontWeight.Bold) // 设置文字加粗.textOverflow({overflow:TextOverflow.Ellipsis}) // 文字超出部分显示省略号.maxLines(2) // 设置最大行数为2Blank() // 空白元素，用于占位Row(){ // 创建一个水平布局的行Text('20万点赞') // 显示点赞数量.fontSize(18) // 设置文字大小.backgroundColor('#fff8e4e4') // 设置背景颜色.fontColor('#f56027') // 设置文字颜色.padding(5) // 设置内边距.borderRadius(5) // 设置圆角Image($r('app.media.more')) // 加载一个更多按钮的图片资源.width(24) // 设置图片宽度}.width('100%') // 设置宽度为父容器宽度的100%.justifyContent(FlexAlign.SpaceBetween) // 设置主轴对齐方式为两端对齐}.height(120) // 设置垂直布局容器的高度.padding(10) // 设置内边距}.height(300) // 设置嵌套垂直布局容器的高度.width(300) // 设置宽度.backgroundColor(Color.White) // 设置背景颜色为白色.borderRadius(15) // 设置圆角}.padding(10) // 设置外边距.width('100%') // 设置宽度为父容器宽度的100%.height('100%') // 设置高度为父容器高度的100%.backgroundColor(Color.Gray) // 设置背景颜色为灰色}
}