HarmonyOS 应用开发《掌上英语》第22篇-卡片式UI设计从今日学习卡到单词翻转卡

发布时间：2026/10/14 1:48:30

HarmonyOS 应用开发《掌上英语》第22篇-卡片式UI设计从今日学习卡到单词翻转卡
卡片式 UI 设计——从今日学习卡到单词翻转卡一、引言卡片式 UI 是移动应用中最主流的视觉设计模式它将信息以独立卡片的形式组织在有限的屏幕空间内清晰呈现多层次的内容。一个优秀的卡片设计需要在视觉层次、交互反馈和性能之间取得平衡。本文以英语学习 App 中的三类典型卡片为例系统讲解 HarmonyOS 中卡片式 UI 的实现思路从简单的「今日学习卡」到数据驱动的「学习进度卡」再到交互复杂的「单词翻转卡」逐步深入卡片式设计的核心技巧。二、基础卡片今日学习卡2.1 卡片布局分析首页的「今日学习卡」是最简单的卡片形态——圆角矩形背景 内部文本 进度条。它使用Builder构建作为主页面的一个子模块// features/homePage/src/main/ets/pages/MainPage.etsBuildertodayStudyBuilder(){Column(){// 标题行今日学习 坚持 7 天Row(){Text(今日学习).fontSize(16).fontWeight(FontWeight.Medium);Text(坚持 7 天).fontSize(12).fontColor($r(sys.color.font_secondary)).layoutWeight(1).textAlign(TextAlign.End);}.width(100%).margin({bottom:8});// 数据行已学 15 词 / 目标 30 词 50%Row(){Text(已学 15 词 / 目标 30 词).fontSize(13).fontColor($r(sys.color.font_secondary)).layoutWeight(1);Text(50%).fontSize(20).fontWeight(FontWeight.Bold).fontColor($r(sys.color.comp_background_emphasize));}.width(100%).margin({bottom:8});// 线性进度条Progress({value:15,total:30,type:ProgressType.Linear}).color($r(sys.color.comp_background_emphasize)).height(8).width(100%);}.padding(16).borderRadius(16).backgroundColor($r(sys.color.background_primary));}2.2 卡片设计要点核心样式参数参数值视觉效果borderRadius(16)16vp 圆角柔和边缘增加亲和力padding(16)16vp 内边距内容和边界留白backgroundColor(primary)白色背景与浅灰底色区隔视觉层次构建卡片的标题行使用layoutWeight(1)textAlign(TextAlign.End)让 “坚持 7 天” 右对齐形成主标题 副标签的视觉结构。进度数据通过字号13 和 20和颜色次要色和强调色区分主次引导用户视线聚焦在 50% 的完成率上。进度条组件使用ProgressType.Linear配合8vp高度形成清晰可见的进度指示其颜色comp_background_emphasize在主题切换时自动适配。三、功能卡片组ReusableFlowItem3.1 统一卡片容器在「练习模式」区域四个功能卡片单词记忆、听力训练、阅读训练、语法练习使用统一的ReusableFlowItem组件。该组件通过stateStyles实现按压反馈ComponentV2struct ReusableFlowItem{Paramitem:PracticeViewnewPracticeView($r(app.media.ic_home),顺序练习,1、3256);build(){Row(){Column(){Text(this.item.name).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontWeight(FontWeight.Bold).fontSize($r(sys.float.Body_S)).fontColor($r(sys.color.font_primary));Text(this.item.describe).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize($r(sys.float.Caption_M)).fontColor($r(sys.color.font_secondary)).margin({top:$r(app.float.vp_2)});}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start).layoutWeight(1);Image(this.item.imageUri).interpolation(ImageInterpolation.High).objectFit(ImageFit.Fill).width(40).height(40).clip(true).margin({left:$r(app.float.vp_4),right:$r(app.float.vp_4)});}.stateStyles({pressed:{.scale({x:0.97,y:0.97})}}).backgroundColor($r(sys.color.background_secondary)).justifyContent(FlexAlign.SpaceBetween).height(100).width(100%).padding({left:$r(app.float.vp_12),right:$r(app.float.vp_16)}).borderRadius($r(app.float.vp_12));}}3.2 按压反馈实现stateStyles是 ArkTS 中处理交互状态的最佳方式。当用户按下卡片时组件以动画方式缩放到 0.97 倍.stateStyles({pressed:{.scale({x:0.97,y:0.97})}})这种微缩放效果模拟了真实世界中按下物体的反应提升了交互的真实感。实现时需要注意缩放值不宜过小0.95~0.98 是合适的范围过小会显得突兀避免在缩放组件中包含复杂布局嵌套结构可能在动画时产生锯齿与点击事件配合stateStyles只管理视觉反馈业务逻辑仍需写在onClick中四、高级卡片3D 翻转单词卡4.1 正反面结构设计单词翻转卡是项目中交互最复杂的卡片使用Stack容器叠加正反两个面。核心思路是通过rotate和opacity的组合实现 3D 翻转动画// features/topicPage/src/main/ets/views/CourseHomePage.etsEntryComponentV2exportstruct CourseHomePage{LocalcurrentIndex:number0;LocalisFlipped:booleanfalse;LocalrotateY:number0;LocalfrontOpacity:number1;LocalbackOpacity:number0;// ...其他状态...build(){// ...Stack(){// 正面单词展示Column(){Row(){Text(this.currentWord().partOfSpeech).fontSize(12).fontColor(#165DFF).backgroundColor(#EAF2FF).padding({left:10,right:10,top:4,bottom:4}).borderRadius(12);Blank();Text(this.isFavorite?★:☆).fontSize(24).fontColor(#FFB020).onClick((){this.isFavorite!this.isFavorite;});}.width(100%).padding({left:18,right:18,top:14});Column(){Text(this.currentWord().word).fontSize(34).fontWeight(FontWeight.Bold).fontColor(#165DFF).margin({bottom:8});Row({space:8}){Text(this.currentWord().phonetic).fontSize(15).fontColor($r(sys.color.font_secondary));Text(▶).fontSize(12).fontColor(#FFFFFF).width(26).height(26).textAlign(TextAlign.Center).borderRadius(13).backgroundColor(#165DFF);}.alignItems(VerticalAlign.Center).margin({bottom:16});Text(this.currentWord().translation).fontSize(20).fontWeight(FontWeight.Medium).fontColor($r(sys.color.font_primary)).textAlign(TextAlign.Center).margin({bottom:14});Text(this.currentWord().example).fontSize(14).fontColor($r(sys.color.font_secondary)).textAlign(TextAlign.Center).maxLines(2).padding({left:18,right:18});}.layoutWeight(1).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).width(100%);Text(点击卡片查看释义).fontSize(11).fontColor($r(sys.color.font_tertiary)).margin({bottom:12});}.width(100%).height(280).backgroundColor($r(sys.color.background_primary)).borderRadius(20).shadow(ShadowStyle.OUTER_DEFAULT_MD)// 3D 投影效果.rotate({x:0,y:this.rotateY,z:0,centerX:50%,centerY:50%,perspective:1200}).opacity(this.frontOpacity).onClick(()this.flipCard());// 反面详细释义Column(){Text(详细释义).fontSize(13).fontColor($r(sys.color.font_secondary)).margin({bottom:8});Text(this.currentWord().translation).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#165DFF).textAlign(TextAlign.Center).margin({bottom:14});Text(this.currentWord().example).fontSize(14).fontColor($r(sys.color.font_primary)).padding({left:20,right:20}).textAlign(TextAlign.Center).maxLines(2).margin({bottom:8});Text(this.currentWord().exampleTranslation).fontSize(13).fontColor($r(sys.color.font_secondary)).padding({left:20,right:20}).textAlign(TextAlign.Center).maxLines(2).margin({bottom:14});Row({space:6}){Text(this.getCategoryLabel()).fontSize(10).fontColor(#165DFF).backgroundColor(#EAF2FF).padding({left:8,right:8,top:3,bottom:3}).borderRadius(8);ForEach(this.currentWord().tags,(tag:string){Text(tag).fontSize(10).fontColor(#165DFF).backgroundColor(#EAF2FF).padding({left:8,right:8,top:3,bottom:3}).borderRadius(8);},(tag:string)tag);}.justifyContent(FlexAlign.Center).margin({bottom:10});Text(点击返回正面).fontSize(11).fontColor($r(sys.color.font_tertiary));}.width(100%).height(280).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).backgroundColor(#F8FAFC)// 浅灰背景区分正反面.borderRadius(20).shadow(ShadowStyle.OUTER_DEFAULT_MD).rotate({x:0,y:this.rotateY-180,z:0,centerX:50%,centerY:50%,perspective:1200}).opacity(this.backOpacity).onClick(()this.flipCard());}.width(90%).height(280);}}4.2 翻转动画实现翻转动画通过animateTo驱动在 400ms 内完成 Y 轴旋转 180 度privateflipCard():void{animateTo({duration:400,curve:Curve.EaseInOut},(){if(this.isFlipped){this.rotateY0;// 回到正面this.frontOpacity1;this.backOpacity0;}else{this.rotateY180;// 翻到反面this.frontOpacity0;this.backOpacity1;}this.isFlipped!this.isFlipped;});}关键动画参数参数值说明duration400ms翻转时长适中节奏curveCurve.EaseInOut缓入缓出模拟真实惯性rotate.y0 → 180Y 轴旋转角度perspective1200透视距离值越小 3D 效果越强正反面同步技巧反面卡片的rotate比正面多 180 度this.rotateY - 180确保卡片翻转过程中始终保持某一面正对用户的视觉效果。透明度frontOpacity/backOpacity配合旋转角度在翻转过程中平滑过渡避免背面透过正面显示。4.3 卡片颜色与布局差异正反面的视觉差异通过颜色和布局来体现维度正面反面背景色background_primary白色#F8FAFC浅灰主色调单词 34px Bold#165DFF释义 22px Bold#165DFF内容重点词性徽章、发音按钮、收藏例句翻译、分类标签底部提示“点击卡片查看释义”“点击返回正面”这种对比明确了正面浏览单词 — 反面查看详解的功能划分用户一目了然。五、卡片设计的通用原则5.1 视觉规范原则实现方式圆角统一所有卡片使用 16~20vp borderRadius阴影层次ShadowStyle.OUTER_DEFAULT_MD提供 3D 层次感留白充足卡片内统一 16vp padding颜色系统背景色使用sys.color变量自动适配主题5.2 交互反馈// 三种反馈示例.stateStyles({pressed:{.scale({x:0.97,y:0.97})}})// 1. 按压缩放.onClick(()this.flipCard())// 2. 点击切换.gesture(SwipeGesture().onAction(...))// 3. 手势滑动六、总结从简单的今日学习卡到复杂的 3D 翻转单词卡卡片式 UI 设计贯穿了英语学习 App 的各个页面。通过borderRadius、shadow、stateStyles等技术手段的组合使用我们构建了视觉统一、交互反馈丰富的卡片体系。单词翻转卡更是实现了正反面独立布局 3D 翻转动画在有限屏幕空间内展示了单词、音标、释义、例句、分类标签等多维信息大幅提升了学习效率。在卡片组件设计时建议遵循先统一后差异化的原则先用基础容器确定卡片模板再针对不同业务场景定制内容和交互。

相关新闻

AI防伪设计插件：SCD印前工具与CS5兼容方案

AI防伪设计插件：SCD印前工具与CS5兼容方案

1. 项目概述：SCD印前防伪设计AI插件"爱明天SCD印前防伪设计AI插件"是一款面向印刷行业的专业工具集，特别针对Adobe Creative Suite 5（CS5）用户提供兼容支持。这个插件通过AI技术简化了传统防伪设计的复杂流程&#xff0…

2026/10/10 10:11:16 阅读更多 →
Unity AssetBundle安全防护实战：AES加密与流式解密性能优化

Unity AssetBundle安全防护实战：AES加密与流式解密性能优化

1. 项目概述：为什么AssetBundle安全防护是Unity项目的“必修课”？在Unity项目的商业化进程中，AssetBundle（AB包）作为资源热更新的核心载体，其安全性直接关系到项目的商业利益和用户体验。想象一下&#xff…

2026/10/2 15:29:51 阅读更多 →
基于HRN模型与游戏引擎：从单张照片生成可驱动3D角色的实战指南

基于HRN模型与游戏引擎：从单张照片生成可驱动3D角色的实战指南

1. 项目概述：从静态照片到动态角色的技术跃迁在游戏开发和数字内容创作领域，角色资产的创建一直是一个高成本、高门槛的环节。传统流程需要美术师从零开始建模、拓扑、展UV、绘制贴图、绑定骨骼、刷权重，最后才能得到一个可动画的模型&#x…

2026/10/5 5:15:34 阅读更多 →

最新新闻

AI Agent构建指南：简单可组合模式比复杂框架更有效

AI Agent构建指南：简单可组合模式比复杂框架更有效

简介：Claude官方发布的《构建高效的Agents》全文翻译中文版，系统梳理了Anthropic团队与数十个行业团队合作一年的核心经验：有效的智能代理并不依赖复杂框架，而应采用简单、可组合的设计模式；报告还从词源学角度厘清代理…

2026/10/14 1:48:14 阅读更多 →
STM32循迹小车完结篇：经典蓝牙SPP无线控制与状态回传实战

STM32循迹小车完结篇：经典蓝牙SPP无线控制与状态回传实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 1:48:14 阅读更多 →
SARscape 5.2：Sentinel-1 SAR数据工程化处理全链路指南

SARscape 5.2：Sentinel-1 SAR数据工程化处理全链路指南

简介：本资源为SARscape 5.2软件的中文功能说明文档（.docx格式），面向遥感图像处理领域的科研人员、地信专业学生及ENVI平台用户，聚焦雷达影像特别是哨兵一号数据的全流程分析需求。文档系统梳理了SARscape 5.2的核心架构…

2026/10/14 1:48:14 阅读更多 →
SAP基金管理实战：从预算结构搭建到预算检查避坑指南

SAP基金管理实战：从预算结构搭建到预算检查避坑指南

简介：这份文档面向SAP财务与预算管理方向的顾问、实施人员及企业财务信息化学习者，系统梳理基金管理模块的核心机制与业务集成逻辑。内容围绕预算结构控制、预算输入下达与释放、采购与成本费用等业务集成、可用性检查四大主题展开，重点讲解基…

2026/10/14 1:48:14 阅读更多 →
小区搜索原理与工程实践：从LTE到5G NR的同步检测全解析

小区搜索原理与工程实践：从LTE到5G NR的同步检测全解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 1:48:14 阅读更多 →
RBCADS 5.0轴承设计校核实战：6A/6B/6C模块选型、寿命计算与避坑指南

RBCADS 5.0轴承设计校核实战：6A/6B/6C模块选型、寿命计算与避坑指南

简介：RBCADS 5.0 滚动轴承计算机辅助设计系统 2005 正式版，面向轴承产品设计人员、机械专业师生及制造企业技术岗，用于快速完成角接触球轴承、四点接触式角接触球轴承、单列圆锥滚子轴承（公制与英制）等常见结构的设计与…

2026/10/14 1:47:14 阅读更多 →

日新闻

AnyPS5通用适配层设计：兼容性与性能的工程取舍

AnyPS5通用适配层设计：兼容性与性能的工程取舍

1. 从"AnyPS5"这个名字说起：它到底想解决什么问题第一次看到"AnyPS5"这个标题，我脑子里冒出来的第一个念头是：这大概率是一个围绕"跨平台运行"或者"通用适配"做文章的项目。名字里的"Any"…

2026/10/14 0:00:41 阅读更多 →
Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

1. 项目概述：Flutter跨平台二手交易应用开发作为一名长期从事移动应用开发的工程师，我最近完成了一个基于Flutter框架的二手物品交易平台项目。这个项目最吸引我的地方在于它完美结合了Flutter的跨平台优势与HarmonyOS的生态特性，实现了"…

2026/10/14 0:00:41 阅读更多 →
DFS算法解决飞机降落调度问题实战

DFS算法解决飞机降落调度问题实战

1. 项目背景与核心思路飞机降落问题是一个经典的调度优化场景，也是算法竞赛和面试中的高频题目。这个题目要求我们合理安排多架飞机的降落顺序和时间，确保所有飞机都能安全着陆而不发生冲突。在实际航空管制中，这类问题直接关系到飞行安全和机…

2026/10/14 0:00:41 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/13 16:22:04 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 22:01:27 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →