鸿蒙移动应用开发--UI组件布局

实验要求：

        制作一个B站视频卡片界面，大致如下图所示，要求应用到线性布局、层叠布局等相关课堂知识。背景图、logo及文本内容不限。

实验环境 ：DevEco Studio

实验过程：

步骤1：创建项目

1. 在您的开发环境中创建一个新的项目。

2. 确保项目中包含必要的资源文件，如背景图、logo图等。

步骤2：设计界面布局

1. 主布局：使用`Column`组件创建一个垂直布局，作为整个视频卡片的容器。

2. 背景图：在`Column`内部，使用`Stack`组件叠加背景图和其他元素。

   - 使用`Image`组件加载背景图，并设置圆角。

   - 使用`Row`组件在背景图上添加播放次数、弹幕数和视频时长等信息。

3. 标题和描述：在背景图下方，使用`Column`组件添加视频标题和描述。

   - 使用`Text`组件显示标题和描述，设置字体大小、行高和文本溢出处理。

   - 使用`Row`组件添加点赞数和设置图标。

步骤3：实现样式和布局

1. 背景图样式：

   - 设置背景图的宽度和高度，使其适应卡片容器。

   - 设置背景图的圆角和边框样式。

2. 信息行样式：

   - 使用`Row`组件创建一个水平布局，包含播放次数、弹幕数和视频时长。

   - 设置每个元素的间距、颜色和字体大小。

3. 标题和描述样式：

   - 设置标题的字体大小、行高和文本溢出处理，使其在两行内显示。

   - 设置描述的字体大小和颜色。

4. 点赞数和设置图标样式：

   - 设置点赞数的背景颜色、边框圆角和内边距。

   - 设置设置图标的宽度。

步骤4：调整和优化

1. 根据需要调整各个组件的大小、位置和样式，确保界面美观且信息清晰。

2. 测试界面在不同设备和分辨率下的显示效果，进行必要的调整。

 源代码：

@Entry
@Component
struct Index {
  build() {
    Column() {

      Column(){
        Stack({alignContent: Alignment.Bottom}){
          Image($r('app.media.bg'))
            .borderRadius({
              topLeft:10,
              topRight:10
            })

          Row(){
            Row({space: 5}){
              Image($r('app.media.bf'))
                .width(19)
                .fillColor(Color.White)
              Text('288万')
                .fontSize(12)
                .fontColor(Color.White)
            }
            .margin({right: 10})
            Row({space: 5}){
              Image($r('app.media.dm'))
                .width(19)
                .fillColor(Color.White)
              Text('219')
                .fontSize(12)
                .fontColor(Color.White)
            }
            Blank()
            Text('4:33')
              .fontSize(12)
              .fontColor(Color.White)

          }
          .height(24)
          .padding({left:5,right:5})
          .width('100%')
          //.backgroundColor(Color.Black)

        }
        .width('100%')
        .height(125)
        //.backgroundColor(Color.Blue)

        Column(){
          Text('“我本长生不老客，怎渡中途短命人”｜齐天大圣的一世【2025bilibili混剪大赛】')
            .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.setting'))
              .width(7)
          }
          .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')

  }
}

 运行截图：