23.[HarmonyOS NEXT Column案例四（下）] 响应式卡片内容实现与样式定制

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

1. 引言

在上一部分中，我们介绍了响应式设计的基本概念、Column组件的水平对齐能力以及如何通过条件渲染实现响应式宽度设置。本教程将继续深入探讨响应式卡片内容的详细实现，包括图片和文本组件的属性设置、卡片样式的定制以及完整代码的分析，帮助开发者掌握更全面的响应式设计技巧。

2. 卡片内容的详细实现

2.1 卡片内容的整体结构

Column() {
    Image($r('app.media.phone'))
        .width('100%')
        .height(200)
        .objectFit(ImageFit.Cover)

    Text('HarmonyOS NEXT开发指南')
        .fontSize(18)
        .fontWeight(500)
        .padding({ left: 24, top: 12, right: 24 })

    Text('了解如何使用Column布局实现响应式界面...')
        .fontSize(14)
        .lineHeight(1.5)
        .padding({ left: 24, right: 24, bottom: 12 })
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(2)
}

卡片内容由三个主要部分组成：

1. 顶部图片
2. 标题文本
3. 描述文本

这种结构是常见的卡片设计模式，适用于展示文章、产品或功能介绍等内容。

2.2 Image组件详解

Image($r('app.media.phone'))
    .width('100%')
    .height(200)
    .objectFit(ImageFit.Cover)

2.2.1 Image组件属性详解

属性	值	作用
资源引用	$r('app.media.phone')	引用应用资源中的图片
width	'100%'	设置图片宽度占父容器的100%
height	200	设置图片高度为固定的200vp
objectFit	ImageFit.Cover	设置图片填充模式为覆盖，确保图片填满容器且不变形

2.2.2 objectFit属性的可选值

ImageFit值	效果描述	适用场景
Cover	保持宽高比缩放图片，使图片完全覆盖容器，可能裁剪部分内容	需要填满容器且不留白边的场景
Contain	保持宽高比缩放图片，使图片完全显示在容器内，可能有空白区域	需要完整显示图片内容的场景
Fill	拉伸图片填满容器，可能导致图片变形	图片比例不重要的场景
None	保持图片原始大小，不进行缩放	需要显示原始图片的场景
ScaleDown	保持宽高比，在None和Contain之间选择较小的一个	需要在保持原始大小和完全显示之间平衡的场景

在卡片设计中，通常使用Cover模式可以确保图片区域视觉效果最佳，不会出现空白区域，同时保持图片不变形。

2.3 标题Text组件详解

Text('HarmonyOS NEXT开发指南')
    .fontSize(18)
    .fontWeight(500)
    .padding({ left: 24, top: 12, right: 24 })

2.3.1 标题Text组件属性详解

属性	值	作用
fontSize	18	设置字体大小为18vp，适合作为卡片标题
fontWeight	500	设置字体粗细为中等偏粗，增强标题的视觉重要性
padding	{ left: 24, top: 12, right: 24 }	设置内边距：左右各24vp，顶部12vp，提供适当的留白

标题文本使用了较大的字号和中等偏粗的字重，使其在视觉层次上更加突出，便于用户快速识别卡片的主题。

2.4 描述Text组件详解

Text('了解如何使用Column布局实现响应式界面...')
    .fontSize(14)
    .lineHeight(1.5)
    .padding({ left: 24, right: 24, bottom: 12 })
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .maxLines(2)

2.4.1 描述Text组件属性详解

属性	值	作用
fontSize	14	设置字体大小为14vp，小于标题，适合作为描述文本
lineHeight	1.5	设置行高为字体大小的1.5倍，提高多行文本的可读性
padding	{ left: 24, right: 24, bottom: 12 }	设置内边距：左右各24vp，底部12vp，提供适当的留白
textOverflow	{ overflow: TextOverflow.Ellipsis }	设置文本溢出时显示省略号
maxLines	2	限制最多显示2行文本，超出部分截断

描述文本使用了较小的字号和适当的行高，在视觉层次上次于标题。通过设置textOverflow和maxLines属性，可以确保描述文本在有限的空间内得到合理展示，避免内容过多导致卡片过长。

3. 卡片样式的定制

3.1 卡片容器的样式设置

.width(this.MockMediaQuery.width > 720 ? '40%' : '100%') // 平板及以上宽度显示为40%宽度
.alignItems(
    this.MockMediaQuery.width > 720 ? HorizontalAlign.Start : HorizontalAlign.Center
) // 大屏左对齐，小屏居中
.backgroundColor(0xFFFFFF)
.shadow({ radius: 4, color: 0x05000000 })
.borderRadius(12)

3.1.1 卡片容器样式属性详解

属性	值	作用
width	条件表达式	根据屏幕宽度动态设置卡片宽度
alignItems	条件表达式	根据屏幕宽度动态设置子组件的水平对齐方式
backgroundColor	0xFFFFFF	设置背景色为白色
shadow	{ radius: 4, color: 0x05000000 }	添加阴影效果，提升卡片的立体感
borderRadius	12	设置边框圆角为12vp，使卡片外观更加圆润

3.2 阴影效果的实现

阴影效果是卡片设计中常用的视觉元素，可以增强界面的层次感和立体感。在HarmonyOS NEXT中，我们可以通过shadow属性来实现阴影效果：

.shadow({ radius: 4, color: 0x05000000 })

3.2.1 shadow属性参数详解

参数	值	作用
radius	4	设置阴影的模糊半径为4vp，值越大阴影越模糊
color	0x05000000	设置阴影颜色为黑色（000000）且透明度为5%（05）

阴影效果的设计原则是：

• 保持适度的模糊半径，避免过于锐利或过于模糊
• 使用低透明度的颜色，避免阴影过于明显
• 与卡片的圆角配合，创造自然的立体效果

3.3 外层容器的样式设置

Column({ space: 24 })
{
    // 卡片内容
}
.width('100%')
.padding(24)

3.3.1 外层容器样式属性详解

属性	值	作用
space	24	设置子组件之间的垂直间距为24vp
width	'100%'	设置容器宽度占父容器的100%
padding	24	设置内边距为24vp，提供适当的留白

外层容器使用了适当的间距和内边距，确保卡片在界面中有足够的呼吸空间，提升整体的视觉体验。

4. 响应式设计的最佳实践

4.1 断点设置

在响应式设计中，断点是指触发布局变化的屏幕尺寸阈值。在我们的案例中，使用了720px作为断点：

this.MockMediaQuery.width > 720 ? '40%' : '100%'

设备类型	屏幕宽度	布局特点
手机	≤720px	卡片宽度100%，内容居中对齐
平板及以上	>720px	卡片宽度40%，内容左对齐

在实际应用中，可以根据需要设置多个断点，以适应更多种类的设备。

4.2 响应式设计的核心原则

原则	说明	实现方式
内容优先	确保内容在任何设备上都能清晰呈现	使用适当的字体大小和行高，限制文本行数
弹性布局	使用相对单位和百分比，而非固定尺寸	使用百分比设置宽度，使用vp单位设置内边距
渐进增强	先确保基本功能，再添加大屏特有的增强功能	在大屏设备上提供更优化的布局和交互
简化设计	在小屏设备上简化界面，保留核心功能	在小屏设备上使用更简洁的布局和更少的装饰元素

5. 完整代码分析

interface MediaQueryType {
    width: number;
    height: number;
};
@Component
export struct ResponsiveCardExample {
    @State MockMediaQuery:MediaQueryType = {
        width: 720,
        height: 1280,
    }
    build() {
        Column(){
            Row(){
                Button('修改模拟尺寸').onClick(()=>{
                    this.MockMediaQuery = {
                        width: 1000,
                        height: 1280,
                    }
                })
            }
            .width('100%')
            .height(30)
            Column({ space: 24 })
            {
                // 根据屏幕宽度动态设置对齐方式
                Column()
                {
                    Image($r('app.media.phone'))
                        .width('100%')
                        .height(200)
                        .objectFit(ImageFit.Cover)

                    Text('HarmonyOS NEXT开发指南')
                        .fontSize(18)
                        .fontWeight(500)
                        .padding({ left: 24, top: 12, right: 24 })

                    Text('了解如何使用Column布局实现响应式界面...')
                        .fontSize(14)
                        .lineHeight(1.5)
                        .padding({ left: 24, right: 24, bottom: 12 })
                        .textOverflow({ overflow: TextOverflow.Ellipsis })
                        .maxLines(2)
                }
                .width(this.MockMediaQuery.width > 720 ? '40%' : '100%') // 平板及以上宽度显示为40%宽度
                .alignItems(
                    this.MockMediaQuery.width > 720 ? HorizontalAlign.Start : HorizontalAlign.Center
                ) // 大屏左对齐，小屏居中
                .backgroundColor(0xFFFFFF)
                .shadow({ radius: 4, color: 0x05000000 })
                .borderRadius(12)
            }
            .width('100%')
            .padding(24)
        }
    }
}

5.1 代码结构分析

1. 接口定义：定义MediaQueryType接口，包含width和height属性
2. 组件定义：使用@Component装饰器定义ResponsiveCardExample自定义组件
3. 状态定义：使用@State装饰器定义MockMediaQuery状态变量，模拟屏幕尺寸
4. 布局结构：使用嵌套的Column和Row组件创建整体布局框架
5. 尺寸切换：实现一个按钮，用于切换模拟的屏幕尺寸
6. 卡片内容：实现包含图片和文本的卡片内容
7. 响应式设计：根据屏幕宽度动态调整卡片宽度和对齐方式
8. 样式设置：为各个组件设置适当的样式属性，包括背景色、阴影、圆角等

5.2 响应式设计的实现分析

在这个案例中，响应式设计主要通过以下两个方面实现：

1. 宽度调整：

   .width(this.MockMediaQuery.width > 720 ? '40%' : '100%')
   

   根据屏幕宽度动态设置卡片宽度，在大屏设备上显示为40%宽度，在小屏设备上显示为100%宽度。

2. 对齐方式调整：

   .alignItems(
       this.MockMediaQuery.width > 720 ? HorizontalAlign.Start : HorizontalAlign.Center
   )
   

   根据屏幕宽度动态设置子组件的水平对齐方式，在大屏设备上左对齐，在小屏设备上居中对齐。

这种实现方式简洁高效，通过少量代码就能实现良好的响应式效果，适合大多数应用场景。

6. 总结

通过本教程的两个部分，我们详细讲解了如何使用Column组件的水平对齐能力（alignItems）和条件渲染技术实现响应式卡片布局