鸿蒙 ArkTS 实战：Learning Showcase 从学习作品展示台到个人成长工具完整解析-平芜编程栈

鸿蒙 ArkTS 实战：Learning Showcase 从学习作品展示台到个人成长工具完整解析

前言

Learning Showcase 是一个基于鸿蒙 ArkTS 声明式 UI 编写的轻量应用，核心目标是记录作品、标签、链接并生成公开主页预览。

它不是复杂后台系统，而是把一个真实的个人成长场景拆成状态字段、交互按钮、结果反馈和可读布局四个部分。

本文围绕项目真实的Index.ets页面展开，分析它如何用@State驱动界面，如何用函数处理交互，如何用Column、Row、Scroll、Grid或Stack组织页面，并进一步讨论在鸿蒙应用里做同类工具时需要注意的结构、体验和可扩展点。

图示说明：本文配图用于表达鸿蒙应用从状态、组件到交互反馈的组织关系，重点是帮助理解页面结构，而不是替代真实运行截图。

可以配合阅读 HarmonyOS 应用开发文档、ArkTS 语言基础、ArkUI 声明式开发范式、组件参考等资料，理解本文涉及的 ArkTS 与 ArkUI 基础能力。

一个小型鸿蒙应用的质量，往往不取决于页面元素数量，而取决于状态是否清晰、交互是否闭环、结果是否能被用户立即理解。

一、项目定位与使用场景

1.1 应用解决的问题

学习作品展示台面向的场景是：学习成果沉淀、作品集展示和技能标签整理。

在这个场景中，用户真正需要的不是一个大而全的数据库，而是一个进入成本很低的记录面板。

页面打开后，用户可以直接看到主题、当前状态和可操作按钮，不需要先学习复杂流程。

这类应用很适合用鸿蒙 ArkTS 实现，因为 ArkUI 的声明式语法能把页面结构和状态关系写得非常集中。

1.2 目标用户与操作节奏

本文面向想在鸿蒙端构建轻量作品集与学习档案的开发者。

从交互节奏看，Learning Showcase 更接近一个单页工具：

用户输入当前信息。
点击主要按钮触发状态变化。
页面立即刷新结果文本或数字。
用户根据反馈继续调整记录。

这种节奏对移动端很友好，尤其适合碎片时间使用。

1.3 为什么适合做成鸿蒙示例

Learning Showcase 的代码足够短，但包含了完整的应用骨架。

有多个@State字段。
有用户输入。
有按钮事件。
有结果反馈。
有基础布局设计。
有可扩展的数据模型。

这让它非常适合作为鸿蒙 ArkTS 入门之后的实战案例。

二、工程结构与入口页面

2.1 页面文件位置

这个项目的核心逻辑位于入口页面Index.ets。

entry/ src/ main/ ets/ pages/ Index.ets

这个结构符合鸿蒙应用常见的页面组织方式，入口页面承担状态声明、交互函数和 UI 构建三类职责。

2.2 组件声明方式

页面使用@Entry与@Component标记一个可渲染组件。

@Entry@Componentstruct Index{build(){// 页面 UI 在这里声明}}

@Entry表示它可以作为页面入口，@Component表示它是一个 ArkUI 组件。

2.3 单页工具的边界

Learning Showcase 没有引入路由、网络请求或本地数据库，所有数据都在当前页面状态中完成。

这让示例的重点非常明确：先把状态驱动 UI的基本功做好。

当后续需要持久化、同步或分享时，再把状态层抽离出去会更自然。

三、状态模型设计

3.1 状态字段总览

学习作品展示台的状态字段如下。

状态字段	初始值	页面职责
`work`	`Data dashboard`	作品名称
`tag`	`ArkTS, chart`	技能标签
`link`	`demo.local/showcase`	作品链接
`shares`	`8`	分享次数
`home`	`Public home preview ready.`	主页预览状态

这些字段覆盖了页面最核心的信息：用户正在编辑什么、系统已经生成什么、页面需要显示什么。

3.2 状态设计的特点

这组状态有三个特点。

字段数量不多，容易维护。
字符串状态偏多，适合表达记录类内容。
数字状态用于计数、等级、进度或温度，反馈直观。

对于个人成长类工具，这种状态结构比复杂对象更容易阅读。

3.3 真实源码片段

下面是项目中的核心状态与函数片段。

@Statework:string='Data dashboard';@Statetag:string='ArkTS, chart';@Statelink:string='demo.local/showcase';@Stateshares:number=8;@Statehome:string='Public home preview ready.';publish():void{this.shares++;this.home=this.work+' shared with tags '+this.tag+'.';}

这段代码体现了 ArkTS 页面里最常见的写法：状态字段先声明，事件函数再读取和修改状态。

当状态变化后，页面中引用这些状态的组件会自动刷新。

四、交互流程分析

4.1 主要交互点

学习作品展示台的交互点并不复杂，但每个按钮都对应一个明确的结果。

交互点	触发效果	用户价值
`publish`	shares 自增，并根据作品与标签刷新主页预览	让页面从静态记录变成可反馈的工具
`TextInput onChange`	编辑作品名、标签和链接	让页面从静态记录变成可反馈的工具
`Publish Home`	触发展示发布流程	让页面从静态记录变成可反馈的工具

交互设计越简单，越需要让反馈文字清楚。

在这个项目里，按钮点击之后通常会更新结果卡、计数字段或说明文本，用户能立刻知道操作已经生效。

4.2 输入框绑定

页面通过TextInput的onChange回调同步输入值。

TextInput({text:this.work,placeholder:'作品名称'}).onChange((v:string)=>this.work=v)

这种写法适合表单很少的轻量页面。

如果字段继续增加，可以把输入区拆成独立组件，或者把字段配置抽成数组来渲染。

4.3 按钮反馈闭环

一个好用的小工具至少要完成三件事。

用户知道当前输入是什么。
用户知道点击按钮后发生了什么。
用户能从结果里继续下一步。

Learning Showcase 的按钮逻辑围绕这三个点展开，所以虽然代码短，体验上仍然是完整的。

五、布局结构拆解

5.1 页面整体布局

项目的页面结构可以概括为：左侧深蓝统计栏显示分享数，右侧滚动内容区管理作品、标签、链接和发布反馈。

这个布局没有堆叠过多装饰，而是优先让主要状态可见。

对于工具类应用，这一点比复杂视觉更重要。

5.2 关键 UI 片段

下面是项目中最能代表页面结构的 UI 代码。

Row(){Column({space:12}){Text('Showcase').fontSize(26).fontWeight(FontWeight.Bold)Text(this.shares.toString()).fontSize(56).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')Text('shares').fontColor('#E0F2FE')}.width('36%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#0369A1')}

可以看到，页面通过颜色、留白、字号和权重区分主次信息。

5.3 滚动容器的意义

移动端屏幕高度有限，记录类工具经常需要输入多个字段。

Scroll可以保证在小屏设备上仍然能访问完整内容。

Scroll(){Column({space:16}){Text('Learning Showcase').fontSize(30).fontWeight(FontWeight.Bold)// 输入区、按钮区、结果区}.padding(20).width('100%')}

这种写法让内容区天然具备纵向扩展能力。

六、视觉层级与颜色策略

6.1 颜色不是装饰，而是信息分组

学习作品展示台使用的背景色是#FFFFFF，强调色是#0369A1。

这些颜色的作用不是单纯美化，而是把功能区分开。

区域	视觉处理	作用
标题区	大字号、粗体	建立页面主题
输入区	白底或浅底	降低编辑压力
结果区	卡片或强调色	呈现操作反馈
按钮区	高对比色	引导用户完成动作

6.2 字号层级

页面中的字号通常可以分成三层。

26 到 58：用于标题、数字或核心指标。
18 到 24：用于结果文本和重要卡片。
15 到 16：用于说明、日志和辅助状态。

这种层级让用户扫一眼就能知道哪里最重要。

6.3 圆角和留白

项目里的卡片普遍使用borderRadius(8)和padding。

Text(this.home).fontSize(15).fontColor('#374151')

留白让文本更容易读，圆角则让记录类工具更温和。

七、ArkTS 状态更新细节

7.1 字符串拼接的业务意义

在 Learning Showcase 里，很多结果不是复杂计算，而是把用户输入重新组织成更有用的句子。

这类字符串拼接看似简单，但它是应用业务表达的核心。

constresult='Current: '+this.work+' / Status: '+this.home;

当记录类工具能把零散输入变成结构化表达时，用户就会感觉它真的在帮自己整理思路。

7.2 数字状态的边界

如果页面中存在数字变化，就需要关注边界。

例如温度、进度、次数、版本、等级等字段，都应该避免出现负数或超过预期范围。

constnextValue=Math.min(100,currentValue+10);constsafeValue=Math.max(0,nextValue);

即使当前项目只有少量数字字段，提前形成边界意识也很重要。

7.3 状态命名的可读性

这些状态名都直接对应页面语义。

命名方式	示例	可读性
业务名词	`work`	直接表达用户输入
结果名词	`home`	表达页面反馈
数字名词	`count`、`progress`、`version`	表达可累计指标

好的命名会让后续扩展更轻松。

八、可扩展的数据模型

8.1 从页面状态扩展为记录对象

当前项目把字段直接写在页面状态里。

如果要支持历史记录，可以先定义一个接口。

interfaceRecordItem{id:string;title:string;summary:string;createdAt:number;tag:string;}

这个接口可以覆盖学习作品展示台的基础记录需求。

8.2 列表渲染结构

当记录变多时，可以使用数组状态和ForEach渲染列表。

@Staterecords:RecordItem[]=[];Column(){ForEach(this.records,(item:RecordItem)=>{Text(item.title).fontSize(18).fontWeight(FontWeight.Medium)})}

这样可以从单条记录平滑扩展到记录库。

8.3 本地持久化方向

当前示例没有写入本地存储。

如果希望用户关闭应用后仍能看到记录，可以把状态保存到首选项或数据库。

interfacePersistedState{payload:string;updatedAt:number;version:number;}

持久化时要注意版本号，避免后续字段升级造成旧数据无法解析。

九、用户体验优化点

9.1 首屏要显示核心价值

Learning Showcase 的首屏会尽快展示标题、关键数字或主要卡片。

这对工具类应用很重要。

用户打开页面时，不应该先看到一堆说明文字，而应该看到可以立刻操作的内容。

9.2 按钮文案要短

按钮文案越短，动作越清楚。

按钮类型	文案特点	适用场景
主按钮	动词明确	保存、生成、发布、拆解
次按钮	辅助动作	报告、回放、降温、切换
模式按钮	名词短语	Interview、Social、Pitch

短文案能降低用户在移动端的阅读负担。

9.3 反馈文字要能复述动作

结果区不要只写 “完成”。

更好的反馈方式是复述用户刚刚完成的动作，例如 “已保存某个关键词” 或 “已为某个目标更新进度”。

this.home='Updated from '+this.work;

这样用户能确认系统理解了自己的输入。

十、调试与验证

10.1 先验证状态变化

调试这类页面时，可以优先检查状态是否变化。

Button('Debug State').onClick(()=>{console.info('state changed: '+this.work);})

如果状态已经变化但 UI 没刷新，通常需要检查组件是否引用了正确字段。

10.2 再验证布局适配

移动端页面要重点检查三种情况。

输入内容很长。
屏幕高度较小。
按钮文案或结果文案换行。

这些情况会暴露出滚动容器、卡片高度和文字对齐的问题。

10.3 常见问题表

场景	风险	处理方式
文本输入为空	学习作品展示台的关键记录缺失	保留 placeholder，并在结果区体现当前可用内容
数值变化过快	页面反馈不稳定	使用上限、下限或自增规则限制状态
卡片文字过长	影响移动端阅读	使用滚动容器和固定卡片留白
主题色过重	长时间使用疲劳	背景色与强调色分层，正文保持清爽

这个表中的问题都可以在开发阶段通过真机预览或模拟器预览提前发现。

十一、工程化改造思路

11.1 抽离常量

当页面颜色和间距逐渐变多时，可以抽离常量。

constPAGE_PADDING=20;constCARD_RADIUS=8;constPRIMARY_COLOR='#0369A1';

这样既方便统一视觉，也方便后续换主题。

11.2 抽离动作函数

当前函数写在页面组件内部，适合小项目。

如果业务逻辑变复杂，可以把动作函数移到独立工具文件。

exportfunctionbuildSummary(input:string,status:string):string{returninput+' -> '+status;}

页面组件只负责调用函数和展示结果，逻辑测试会更容易。

11.3 抽离卡片组件

重复出现的卡片可以封装成 Builder。

@BuilderfunctionInfoCard(title:string,value:string,color:string){Column({space:6}){Text(title).fontSize(14).fontColor('#6B7280')Text(value).fontSize(18).fontWeight(FontWeight.Bold)}.padding(14).backgroundColor(color).borderRadius(8)}

这样可以减少页面重复代码。

十二、与同类工具的设计对比

12.1 功能边界对比

类型	功能重点	复杂度	适合阶段
学习作品展示台	记录作品、标签、链接并生成公开主页预览	低	MVP 和个人工具
多页面系统	分类、检索、统计	中	数据量增大后
云同步产品	账号、同步、分享	高	商业化阶段

从这个对比可以看出，当前项目选择了非常适合练手的边界。

12.2 为什么先做小闭环

小闭环能让开发者更快验证交互是否成立。

对于学习作品展示台来说，只要用户能完成一次记录、一次点击、一次反馈，应用价值就已经出现。

12.3 后续增长空间

后续可以扩展这些能力。

历史列表。
标签筛选。
搜索。
统计图。
桌面卡片。
多设备同步。

但这些能力都应该建立在当前清晰的状态模型之上。

十三、构建与运行流程

13.1 使用 DevEco Studio 打开工程

开发者可以使用 DevEco Studio 打开项目根目录。

# 使用 DevEco Studio 打开项目后，等待依赖同步完成# 然后选择模拟器或真机运行 entry 模块

运行前需要确认 SDK、签名和设备连接状态正常。

13.2 检查模块配置

鸿蒙工程通常包含模块配置文件。

{"module":{"name":"entry","type":"entry","srcEntry":"./ets/Application/EntryAbility.ets"}}

具体字段以工程实际文件为准，本文重点是页面开发思路。

13.3 预览页面变化

调试 UI 时，可以把修改拆成小步骤。

# 1. 修改状态字段# 2. 修改 UI 绑定# 3. 运行预览# 4. 点击按钮确认反馈

这种节奏能快速定位问题。

十四、代码可维护性分析

14.1 当前代码优点

Learning Showcase 当前实现有几个明显优点。

业务目标单一。
状态字段语义清楚。
按钮动作直接。
页面布局不绕。
适合继续扩展。

这些优点让项目非常适合作为 ArkTS 小应用案例。

14.2 可能变复杂的地方

随着功能增加，复杂度通常来自三处。

记录数量增加。
页面交互增加。
结果生成规则增加。

提前识别这些变化，可以避免页面文件过早膨胀。

14.3 分层后的目录示例

entry/src/main/ets/ pages/ Index.ets model/ RecordItem.ets utils/ summaryBuilder.ets components/ InfoCard.ets

这个目录结构适合从单页工具扩展到更完整的应用。

十五、发布级文章视角下的技术亮点

15.1 状态与业务强绑定

学习作品展示台的每个状态字段都能在页面上找到对应含义。

这让读者可以直接从代码理解产品设计。

15.2 交互路径短

从输入到按钮再到结果，路径非常短。

这种设计适合个人效率和成长工具，因为用户不会愿意在记录前完成复杂配置。

15.3 可扩展但不臃肿

当前项目没有为了未来需求提前堆叠复杂框架。

它把重点放在一个可运行、可理解、可继续扩展的页面上。

对初学者来说，能把一个小工具做完整，比把很多概念写在同一个项目里更有价值。

十六、总结

Learning Showcase 用非常直接的 ArkTS 代码完成了学习作品展示台的核心体验：用户输入信息，按钮触发动作，页面立刻给出反馈。

从技术角度看，它覆盖了@State、TextInput、Button、布局容器、文本展示和基础视觉层级，是一个适合反复拆解的鸿蒙单页应用案例。

从产品角度看，它把学习成果沉淀、作品集展示和技能标签整理这个具体场景压缩成一个轻量工具，让用户能在短时间内完成记录和反馈。

如果把它继续扩展，可以加入历史记录、本地存储、标签筛选和统计图，但当前版本已经具备完整的最小可用闭环。

相关资源：

HarmonyOS 应用开发文档
ArkTS 语言基础
ArkUI 声明式开发范式
组件参考
状态管理
应用工程结构
性能调优
DevEco Studio
armonyos-guides/arkts-get-started)
ArkUI 声明式开发范式
组件参考
状态管理
应用工程结构
性能调优