使用鸿蒙HarmonyOs NEXT 开发b站的卡片效果 手把手教学

资源准备：

需要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}){ // 创建一个水平布局的行，子元素之间间隔20
            Row({space:10}){ // 再次创建一个水平布局的行，用于嵌套布局
              Image($r('app.media.play')) // 加载一个播放图标的图片资源
                .width(20) // 设置图片宽度
                .fillColor(Color.White) // 设置图片填充颜色为白色

              Text('520万') // 显示播放次数
                .fontColor(Color.White) // 设置文字颜色为白色
            }

            Row({space:5}){ // 创建一个水平布局的行，子元素之间间隔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%') // 设置宽度为父容器宽度的100%
        }
        .height(180) // 设置堆叠布局容器的高度
        .width('100%') // 设置宽度为父容器宽度的100%

        Column(){ // 创建一个垂直布局的容器
          Text('使用HarmonyOs NEXT开发B站卡片的HarmonyOs的界面效果')
            .fontSize(22) // 设置文字大小
            .fontWeight(FontWeight.Bold) // 设置文字加粗
            .textOverflow({overflow:TextOverflow.Ellipsis}) // 文字超出部分显示省略号
            .maxLines(2) // 设置最大行数为2

          Blank() // 空白元素，用于占位

          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) // 设置背景颜色为灰色

  }
}