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)
}

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

顶部图片
标题文本
描述文本

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

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 代码结构分析

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

5.2 响应式设计的实现分析

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

宽度调整：

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

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

对齐方式调整：

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

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

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

6. 总结

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

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

效果演示

1. 引言

2. 卡片内容的详细实现

2.1 卡片内容的整体结构

2.2 Image组件详解

2.2.1 Image组件属性详解

2.2.2 objectFit属性的可选值

2.3 标题Text组件详解

2.3.1 标题Text组件属性详解

2.4 描述Text组件详解

2.4.1 描述Text组件属性详解

3. 卡片样式的定制

3.1 卡片容器的样式设置

3.1.1 卡片容器样式属性详解

3.2 阴影效果的实现

3.2.1 shadow属性参数详解

3.3 外层容器的样式设置

3.3.1 外层容器样式属性详解

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

4.1 断点设置

4.2 响应式设计的核心原则

5. 完整代码分析

5.1 代码结构分析

5.2 响应式设计的实现分析

6. 总结

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

效果演示

1. 引言

2. 卡片内容的详细实现

2.1 卡片内容的整体结构

2.2 Image组件详解

2.2.1 Image组件属性详解

2.2.2 objectFit属性的可选值

2.3 标题Text组件详解

2.3.1 标题Text组件属性详解

2.4 描述Text组件详解

2.4.1 描述Text组件属性详解

3. 卡片样式的定制

3.1 卡片容器的样式设置

3.1.1 卡片容器样式属性详解

3.2 阴影效果的实现

3.2.1 shadow属性参数详解

3.3 外层容器的样式设置

3.3.1 外层容器样式属性详解

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

4.1 断点设置

4.2 响应式设计的核心原则

5. 完整代码分析

5.1 代码结构分析

5.2 响应式设计的实现分析

6. 总结

热门文章

最新文章

相关电子书