鸿蒙移动应用开发--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')}
}

运行截图：