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

原创

于 2024-10-08 16:51:01 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙弹性组件 #鸿蒙Stack #鸿蒙Colum #鸿蒙Row #鸿蒙交叉轴对距离方式 #鸿蒙播放器卡片 #鸿蒙复杂布局

最终结果如下：

先整体分析，把效果图按区域划分为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万')