实验要求：
制作一个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')
}
}运行截图：
