【综合案例】使用DevEco Studio编写B站视频卡片

效果展示

知识点

层叠布局

介绍：层叠布局具有较强的 组件层叠 能力。

使用场景：卡片层叠效果

特点：层叠操作 更简洁，编码效率更高。【绝对定位的优势是更灵活】

Stack容器内的子元素顺序是先写的在最下面，即从下到上依次是item1 --> item2 --> item3

语法：

Stack({
 alignContent: Alignment.Center
}) {
 Item1()
 Item2()
 Item3()
}

布局方位有9个

文字溢出省略号

作用：设置文本超长时的显示方式

语法：

.textOverflow({
    overflow: TextOverflow.xxx
})

注意：需要配合 .maxLines(行数) 使用

代码展示

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Column() {
        Stack({ alignContent: Alignment.BottomStart }) {
          Image($r("app.media.bz_img"))
            .width("100%")
            .borderRadius({
              topLeft: 20,
              topRight: 20
            })
          Row() {
            Image($r("app.media.bz_play"))
              .width(20)
              .fillColor("#fff")
            Text("288万")
              .fontColor("#fff")
              .margin({
                left: 5,
                right: 15
              })
            Image($r("app.media.bz_msg"))
              .width(20)
              .fillColor("#fff")
            Text("8655")
              .fontColor("#fff")
              .margin({
                left: 5
              })
            Text("4:33")
              .layoutWeight(1)
              .textAlign(TextAlign.End)
              .fontColor("#fff")
          }
          .padding(5)
        }

        Column({ space: 10 }) {
          Text("【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣之歌》")
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(2)
          Row() {
            Text("19万点赞")
              .padding(4)
              .fontSize(14)
              .fontColor("#DF7D58")
              .backgroundColor("#FDEBE6")
            Image($r("app.media.bz_more"))
              .width(15)
              .fillColor("#999")
          }
          .width("100%")
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .padding(10)

      }
      .width("80%")
      .borderRadius(20)
      .backgroundColor("#fff")
    }
    .padding(20)
    .width("100%")
    .height("100%")
    .linearGradient({
      angle: 135, // 设置颜色渐变起始角度为顺时针方向45°
      colors: [
        [0xceeff2, 0.0],
        [0xf2e0de, 0.4],
        [0xFFFFFF, 0.8],
      ]
    })
  }
}