鸿蒙开发之ArkUI 界面篇 二十三 B站视频卡片

最终结果如下：

先整体分析，把效果图按区域划分为1、2、3三个区域，如下图:

三个区域是垂直布局，大容器是Colum，区域1是有有多个组件，需要有个大容器包裹，这里Colum+Stack+Row+Image+Text+Image+Text+Text，第二部分是Text，第三部分是Row+Text+Image，需要特别主要的是：区域1，需要外层容器是Colum或者是Row构成一个整体，再在容器里面塞入组件，刚刚开始可能觉得不需要外层容器，只需要Image+Stack来实现，这样的话Stack无法确定位置，完整代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      // b站视频卡片
      Column() {
        // 1. 上面图片区域（层叠布局）
        Stack({ alignContent: Alignment.BottomStart }) {
          Image($r('app.media.bz_img'))
            .borderRadius({
              topLeft: 10,
              topRight: 10
            })
          Row() {
            Row({ space: 5 }){
              Image($r('app.media.bz_play'))
                .width(14)
                .fillColor(Color.White)
              Text('288万')
                .fontSize(12)
                .fontColor(Color.White)
            }
            .margin({ right: 10 })
            Row({ space: 5 }){
              Image($r('app.media.bz_msg'))
                .width(14)
                .fillColor(Color.White)
              Text('8655')
                .fontSize(12)
                .fontColor(Color.White)
            }

            Blank()

            Text('4:33')
              .fontSize(12)
              .fontColor(Color.White)
          }
          .height(24)
          .padding({ left: 5, right: 5 })
          .width('100%')
        }
        .width('100%')
        .height(125)

        // 2. 底部文字区域
        Column() {
          Text('【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣流派推广曲》')
            .fontSize(13)
            .lineHeight(16)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(2)
          Row() {
            Text('19万点赞')
              .fontSize(10)
              .fontColor('#e66c43')
              .backgroundColor('#fef0ef')
              .padding(5)
              .borderRadius(2)
            Image($r('app.media.bz_more'))
              .width(14)
          }
          .margin({ top: 6 })
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .padding(5)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .margin({ top: 10 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  }
}

总结：鸿蒙中遇到组件叠加用Stack，先整体后局部的构架思路，图片使用Image组件，borderRadius调整圆角，Row水平布局，组件的间距可以用margin也可以使用space，也可使用padding，文字Text，Blank弹性组件，作用是预留空间大的地方，justifyContent(FlexAlign.SpaceBetween)主轴方向子组件的距离，