鸿蒙原生应用 ArkTS 表单工程：技能交换发布页的六类胶囊与发布校验
鸿蒙原生应用 ArkTS 表单工程：技能交换发布页的六类胶囊与发布校验
App 38「校园技能交换」发布（Func1Tab），主题色
#2D9CDB青蓝。发布页采用"Header + 表单 + 发布"三区布局——白色 Header（"发布技能"标题） + FormCard 表单卡（我能提供的技能 TextInput + 技能分类 6 胶囊 Flex 换行：设计/编程/语言/音乐/运动/其他 + 熟练程度 3 等宽胶囊：入门/熟练/精通 + 想交换的技能 TextInput + 技能介绍 TextArea） + “发布技能"按钮（48 高青蓝，点击按 skillName 判断 Toast"发布成功”/“请填写技能名称”）。本篇基于38-skill-swap/entry/src/main/ets/pages/Func1Tab.ets（约 94 行）逐段拆解，附 4 张实机截图。
一、整体结构：三区"Header + 表单 + 发布"布局
App 38 发布页是"标题 + 技能表单 + 提交"的技能发布页——2 个 @Builder 块：
build() {
Column() {
this.Header()
Scroll() {
Column({ space: 16 }) {
this.FormCard()
Button('发布技能').fontSize(15).fontColor('#FFFFFF').backgroundColor(C.primary)
.width('100%').height(48).borderRadius(D.rMd)
.onClick(() => { promptAction.showToast({ message: this.skillName.length > 0 ? '发布成功' : '请填写技能名称' }); })
}
.width('100%')
.padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad + this.safeBottom + 20 })
}
.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
}
.width('100%').height('100%').backgroundColor(C.bg)
}
3 块结构：
- Header — 白色背景 + "发布技能"标题
- FormCard — 技能表单卡（5 个字段）
- 发布按钮 — 48 高青蓝提交
与 App 37 发布页对比——App 37 没有发布 Tab（只有上传菜单）。与 App 34/35/36 发布页对比——App 34 资料上传、App 35 笔记发布、App 36 课本发布、App 38 技能发布——“四种发布页”——“34 资料/35 笔记/36 课本/38 技能”——“发布表单模板复用”——“系列发布页统一”。
“5 字段表单” 是 App 38 的特色——“技能名 + 分类 + 熟练度 + 想交换 + 介绍”——“比 34/35/36 更多字段”——“技能发布的信息完整”——“双向技能（提供 + 想学）”——“技能发布的特有字段”。
主题色 #2D9CDB 青蓝——同首页——“品牌色贯穿全 App”。
二、Header：白色 + “发布技能”
Header 是 **白色 + “发布技能”**的极简标题头：
@Builder
Header() {
Row() { Text('发布技能').fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) }
.width('100%').height(this.safeTop + 56).padding({ top: this.safeTop, left: D.pad, right: D.pad })
.backgroundColor(C.card).alignItems(VerticalAlign.Bottom)
}
Header 结构：白色背景 + 20 号加粗黑色"发布技能" + 56 高 + safeTop + 底部对齐——“同系列标准 Header”。
“发布技能” 的命名——“发布 + 技能”——“动词 + 名词”——“发布动作”——“卖家/提供者入口”——“命名的动作性”——“发布 = 提供技能”。
height(this.safeTop + 56) 固定高度——“56 + safeTop = 标准 Header 高”——“系列统一”。
alignItems(VerticalAlign.Bottom) 底部对齐——“避开状态栏”——“标准适配”。
三、FormCard：技能表单卡（本页核心）
FormCard 是 5 个字段的技能表单卡：
@Builder
FormCard() {
Column({ space: 16 }) {
Column({ space: 6 }) {
Text('我能提供的技能').fontSize(13).fontColor(C.textSub).width('100%')
TextInput({ placeholder: '例如：吉他弹唱、PS修图' })
.backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44)
.onChange((v: string) => { this.skillName = v; })
}
Column({ space: 6 }) {
Text('技能分类').fontSize(13).fontColor(C.textSub).width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.cats, (c: string, idx: number) => {
Text(c).fontSize(12)
.fontColor(this.activeCat === idx ? '#FFFFFF' : C.textSub)
.padding({ left: 14, right: 14, top: 7, bottom: 7 })
.backgroundColor(this.activeCat === idx ? C.primary : C.cardSoft).borderRadius(14)
.margin({ right: 10, bottom: 10 })
.onClick(() => { this.activeCat = idx; })
}, (c: string) => c)
}.width('100%')
}
Column({ space: 6 }) {
Text('熟练程度').fontSize(13).fontColor(C.textSub).width('100%')
Row({ space: 10 }) {
ForEach(this.levels, (l: string, idx: number) => {
Text(l).fontSize(13)
.fontColor(this.activeLevel === idx ? '#FFFFFF' : C.textSub)
.textAlign(TextAlign.Center).layoutWeight(1).padding({ top: 9, bottom: 9 })
.backgroundColor(this.activeLevel === idx ? C.primary : C.cardSoft).borderRadius(D.rSm)
.onClick(() => { this.activeLevel = idx; })
}, (l: string) => l)
}.width('100%')
}
Column({ space: 6 }) {
Text('想交换的技能').fontSize(13).fontColor(C.textSub).width('100%')
TextInput({ placeholder: '你想学什么？' })
.backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44)
.onChange((v: string) => { this.wantSkill = v; })
}
Column({ space: 6 }) {
Text('技能介绍').fontSize(13).fontColor(C.textSub).width('100%')
TextArea({ placeholder: '介绍你的技能水平和可教内容...' })
.backgroundColor(C.cardSoft).borderRadius(D.rSm).height(90)
.onChange((v: string) => { this.desc = v; })
}
}
.width('100%').padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
}
FormCard 结构：Column（16 间距）+ 5 个字段区 + 16 padding + 白底 + 20 圆角 + 1px 边框——“技能表单卡”——“比 34/35/36 多 2 个字段”。
3.1 我能提供的技能（TextInput）
Text('我能提供的技能') 13 号灰标签——“字段名”——“提供技能”——“我能 = 提供者视角”。
TextInput({ placeholder: '例如：吉他弹唱、PS修图' }) 输入框——“占位示例”——“44 高”——“浅灰底”——“技能名称”——“同首页技能名”。
onChange((v: string) => { this.skillName = v; }) 值绑定——“skillName 状态”——“输入即更新”——“发布校验依据”。
3.2 技能分类（6 胶囊 Flex）
Text('技能分类') 13 号灰标签——“字段名”——“分类选择”。
Flex({ wrap: FlexWrap.Wrap }) 换行布局——“自动换行”——“6 胶囊”——“标签云”。
6 分类：设计/编程/语言/音乐/运动/其他——“与首页分类一致”——“跨页统一”——“其他 = 兜底”——“分类完整”。
fontColor(this.activeCat === idx ? '#FFFFFF' : C.textSub) 选中白字——“选中白、未选灰”。
backgroundColor(this.activeCat === idx ? C.primary : C.cardSoft) 选中青蓝底——“选中青蓝、未选浅灰底”——“胶囊选中态”——“同首页胶囊”。
borderRadius(14) 14 圆角胶囊——“胶囊形”。
margin({ right: 10, bottom: 10 }) 胶囊间距——“10 间距”——“换行间距”。
onClick(() => { this.activeCat = idx; }) 点击选分类——“单选”——“@State activeCat”——“同首页 CatRow”——“跨页状态一致”。
3.3 熟练程度（3 等宽胶囊）—— 本页特色
Text('熟练程度') 13 号灰标签——“字段名”——“等级选择”。
Row({ space: 10 }) 3 等宽布局——“横向排列”——“3 个等宽”——“不换行”——“等宽胶囊”——“与分类 Flex 不同”。
3 等级：入门/熟练/精通——“3 级等级”——“从低到高”——“等级体系”——“同首页等级标签”——“跨页一致”。
Text(l).textAlign(TextAlign.Center).layoutWeight(1) 等宽居中——“layoutWeight(1) 等分”——“3 等宽”——“textAlign 居中”——“等宽胶囊”——“系列首次等宽胶囊”。
padding({ top: 9, bottom: 9 }) 9 纵向 padding——“胶囊内边距”——“高点击区”。
backgroundColor(this.activeLevel === idx ? C.primary : C.cardSoft) 选中青蓝底——“选中青蓝”——“胶囊选中态”。
borderRadius(D.rSm) 10 圆角——“方角胶囊”——“比 14 小”——“等宽胶囊的圆角”。
onClick(() => { this.activeLevel = idx; }) 点击选等级——“单选”——“@State activeLevel”——“默认熟练（idx=1）”——“等级选择”。
“默认熟练” 的合理——“activeLevel = 1”——“熟练 = 中间等级”——“默认合理”——“用户可改”。
与 App 34/35/36 胶囊对比——“34 课程/35 类型/36 成色都是 Flex 换行”——“38 熟练度用等宽 Row”——“两种胶囊布局”——“38 的等宽创新”——“分类换行 vs 等级等宽”。
3.4 想交换的技能（TextInput）
Text('想交换的技能') 13 号灰标签——“字段名”——“想学技能”——“双向技能”——“交换需求”。
TextInput({ placeholder: '你想学什么？' }) 输入框——“占位”——“想学内容”——“44 高”——“交换条件”。
onChange((v: string) => { this.wantSkill = v; }) 值绑定——“wantSkill 状态”——“想学技能”——“与首页 🔄想学 呼应”。
3.5 技能介绍（TextArea）
Text('技能介绍') 13 号灰标签——“字段名”——“技能说明”。
TextArea({ placeholder: '介绍你的技能水平和可教内容...' }) 多行输入——“90 高”——“技能水平”——“可教内容”——“多行”——“技能详情”。
onChange((v: string) => { this.desc = v; }) 值绑定——“desc 状态”——“技能介绍”。
3.6 五个字段的状态
@State skillName / wantSkill / desc / activeCat / activeLevel——“5 个状态”——“技能名 + 想学 + 介绍 + 分类 + 等级”——“完整发布数据”——“技能信息”——“双向技能”。
四、发布按钮
发布按钮是 48 高青蓝提交按钮：
Button('发布技能').fontSize(15).fontColor('#FFFFFF').backgroundColor(C.primary)
.width('100%').height(48).borderRadius(D.rMd)
.onClick(() => { promptAction.showToast({ message: this.skillName.length > 0 ? '发布成功' : '请填写技能名称' }); })
Button 结构："发布技能"白字青蓝 15 号 + 48 高 + 14 圆角 + 满宽——“主提交按钮”——“同系列发布按钮”。
this.skillName.length > 0 ? '发布成功' : '请填写技能名称' 校验——“三目校验”——“skillName 非空 = 成功”——“空 = 请填写技能名称”——“简单校验”——“同系列”——“发布校验模板”。
fontColor('#FFFFFF').backgroundColor(C.primary) 白字青蓝——“品牌色按钮”——“高对比”。
height(48) 48 高——“大按钮”——“拇指友好”——“主操作”。
五、发布页的交互细节与可用性分析
5.1 5 字段表单的"完整"
技能名 + 分类 + 等级 + 想学 + 介绍——“5 字段”——“技能发布信息完整”——“双向技能”——“比 34/35/36 多 2 字段”——“技能发布特有”。
5.2 等宽胶囊的"创新"
3 熟练度等宽——“layoutWeight 等分”——“3 等宽”——“系列首次”——“等级选择”——“布局创新”。
5.3 双向技能的"交换"
提供 + 想学——“双向字段”——“技能交换条件”——“供需匹配”——“交换的核心”——“技能发布的双向”。
5.4 发布页的"色彩心理学"
青蓝（#2D9CDB）——“蓝色 = 专业/信任”——“发布按钮青蓝”——“技能的专业”——“发布 = 提供”。
5.5 发布页的"信息层级"
L1 标题（Header）→ L2 表单（FormCard）→ L3 发布（按钮）——“3 层信息”——“从标题到表单到发布”。
5.6 发布页的"决策路径"
填技能名 → 选分类 → 选等级 → 填想学 → 写介绍 → 点发布——“6 步发布”——“完整技能发布流程”。
5.7 发布页的"对比与统一"
统一：5 字段同结构（标签 + 控件）——“表单项统一”。
对比：5 字段类型不同（输入框/胶囊/等宽/多行）——“控件差异”。
5.8 发布页的"demo 完整性"
表单 + 校验 = 完整发布页——“可发布”——“技能提供演示”——“demo 的完成度”。
5.9 发布页的"设计哲学"
发布页的 3 个设计哲学：
- 双向优先——提供 + 想学
- 分类优先——6 分类胶囊
- 等级优先——熟练度选择
“双向 + 分类 + 等级的发布页”——“技能发布页的设计原则”——“从哲学看设计”。
5.10 发布页的"系列创新"
等宽等级胶囊是系列亮点——“38 发布页的创新”——“3 等宽”——“等级选择”——“技能发布范式”。
5.11 发布页的"终评"
表单 + 校验 = 完整发布页——“发布页的完成度”——“可上线级”——“系列技能发布标杆”。
5.12 发布页的"与首页呼应"
发布技能名 → 首页技能列表——“跨页数据”——“发布即展示”——“技能闭环”——“数据一致”。
5.13 发布页的"双向字段价值"
提供技能 + 想学技能——“双向数据”——“交换匹配基础”——“供需对应”——“技能交换核心”——“38 发布页特色”——“交换的准备”。
5.14 发布页的"分类跨页一致"
6 分类与首页一致——“设计/编程/语言/音乐/运动/其他”——“跨页统一”——“分类体系”——“数据连贯”——“发布即分类”——“技能归类”。
5.15 发布页的"等级体系"
入门/熟练/精通——“3 级等级”——“水平标识”——“与首页等级标签呼应”——“等级统一”——“技能质量”——“等级标准化”。
5.16 发布页的"校验逻辑"
skillName.length > 0——“非空判断”——“最小校验”——“发布成功/请填写”——“校验反馈”——“表单可用性”——“同系列校验”。
5.17 发布页的"占位文案"
吉他弹唱PS修图 + 你想学什么 + 技能水平可教内容——“3 个占位”——“引导输入”——“占位 = 示例”——“输入引导”——“文案的亲切”——“双向的引导”。
5.18 发布页的"与 App 34/35/36 对比"
34 资料/35 笔记/36 课本都是 3 字段——“38 技能 5 字段”——“技能发布信息更多”——“双向技能特有”——“表单模板演进”——“系列表单丰富”。
5.19 发布页的"用户心智"
“发布我的技能”——“技能提供者”——“分享技能”——“交换准备”——“场景驱动”——“发布的价值”——“技能社区的供给”。
5.20 发布页的"demo 价值"
表单 + 校验 = 完整发布页——“可发布”——“技能供给演示”——“表单模板”——“双向技能范式”——“模板沉淀”。
5.21 发布页的"色彩一致性"
青蓝贯穿——“发布按钮 + 选中胶囊”——“品牌记忆”——“青蓝 = 发布”——“主题色辨识”——“色彩品牌”。
5.23 发布页的"首屏信息"
首屏：技能名 + 分类 + 熟练度——“核心字段在前”——“先填名后选类”——“表单引导”——“操作顺序”——“表单的引导”。
5.24 发布页的"可滚动"
Scroll 容器——“表单可滚动”——“内容超出可滚”——“小屏适配”——“表单完整”——“滚动浏览”。
5.25 发布页的"数据流"
5 状态 → 校验 → 发布——“数据流”——“从输入到发布”——“状态管理”——“声明式 UI”——“发布的数据链”。
5.26 发布页的"最终设计评价"
表单 + 校验 = 完整发布页——“从结构到输入到校验的完整”——“可上线级”——“系列技能发布标杆”——“发布页完成度评级”。
5.27 发布页的"跨 App 复用"
表单卡（34/35/36/38 共用）——“模板复用”——“一套表单多 App”——“组件沉淀”——“设计效率”——“系列统一”。
5.28 发布页的"等宽胶囊布局"
Row + layoutWeight——“3 等分”——“并列等级”——“视觉均衡”——“等宽布局”——“等级选择的直观”——“布局创新”。
5.29 发布页的"技能生态"
发布（供给）→ 首页（展示）→ 交换（匹配）→ 交流（沟通）——“技能生态闭环”——“从发布到完成”——“技能交换全流程”——“生态完整”。
5.30 发布页的"验收评价"
技能名 + 分类 + 等级 + 想学 + 介绍 = 完整技能发布页——“从双向信息到分类等级的完整”——“可上线级”——“系列技能发布标杆”——“发布页验收达标”。
六、总结：青蓝 + 5 字段表单 + 发布
App 38 发布页一句话：用青蓝（#2D9CDB）组织一个"5 字段表单 + 发布"的技能发布页——FormCard 用技能名 TextInput + 6 分类胶囊 + 3 等宽熟练度 + 想学 TextInput + 介绍 TextArea 收集双向技能信息，发布按钮用 skillName 校验反馈"发布成功/请填写技能名称"。
3 个设计亮点：
- 5 字段完整表单——技能发布全信息
- 3 等宽熟练度——layoutWeight 等分（系列首次）
- 双向技能——提供 + 想学
主题色设计逻辑：青蓝 = 专业/信任——“发布页用青蓝，品牌色贯穿”——“发布按钮青蓝 = 提供”。
与系列呼应：表单卡（34/35/36）、胶囊（系列）、TextInput/TextArea（系列）、等宽胶囊（系列首次）、Button（系列）、Toast 反馈（系列）——“38 发布把系列的表格 + 胶囊 + 状态手法组合出’技能发布’场景”。
体验细节：双向字段、分类等级选择、5 字段完整、发布校验——“发布页的核心 = 让用户’3 秒填技能 + 5 秒发布’”。
可扩展性展望：真实发布、图片上传、标签选择、技能审核、匹配推荐、发布到首页——“demo 的技能发布页骨架完整”。
六、扩展思考：发布页的技能供给与设计哲学
6.1 发布页的"技能发布流程"
完整发布漏斗：
填技能名 → 选分类 → 选熟练度 → 填想学 → 写介绍 → 点发布 → 校验 → 发布成功 → 首页展示
“6 步发布流程”——“从技能名到发布”——“技能供给”——“完整链路”——“发布页的价值”——“技能交换的供给端”。
6.2 发布页的"信息架构"
3 层信息：
- L1 标题（Header）——“发布技能”
- L2 表单（FormCard）——“什么技能”
- L3 提交（Button）——“发布”
“3 层渐进式”——“从标题到表单到发布”——“技能发布的信息金字塔”——“用户逐步完成”。
6.3 发布页的"业务建模"
5 个 @State（skillName/wantSkill/desc/activeCat/activeLevel）——“5 状态建模”——“技能数据”——“双向技能”——加图片（image）、加标签（tags）即可扩展——“数据模型的扩展点”。
6.4 发布页的"对比与统一"
统一：5 字段同结构（标签 + 控件）——“表单项的统一”。
对比：5 字段类型不同（TextInput/胶囊/等宽/TextArea）——“控件的差异”——“表单的多样”。
6.5 发布页的"设计哲学"
发布页的 3 个设计哲学：
- 双向优先——提供 + 想学双字段
- 分类优先——6 分类胶囊
- 等级优先——熟练度等宽
“双向 + 分类 + 等级的发布页”——“技能发布页的设计原则”——“从哲学看设计”——“这套方法论可直接迁移到任何技能/服务交换类 App”。
6.6 发布页的"终评"
App 38 发布页综合评估——“三区结构 + 青蓝主题 + 完整技能链”——“发布页的完成度评级”——“一个可上线级的技能发布页”——“系列技能发布的标杆”——“demo 的高完成度”。
七、彩蛋：发布页的细节设计
7.1 “我能提供的技能” 的视角
“我能”——“提供者视角”——“主动提供”——“我能 = 自信”——“标签的视角”——“技能发布的主人公”。
7.2 “你想学什么？” 的占位
“你想学什么？”——“交换需求”——“反问引导”——“想学的提示”——“双向思维”——“占位文案”——“交换的条件”。
7.3 3 等宽的"视觉"
3 等宽胶囊——“均分宽度”——“并列等级”——“视觉均衡”——“等级平等”——“等宽 = 公平”——“等宽胶囊的视觉”。
7.4 默认熟练的"合理"
activeLevel = 1 熟练——“中间等级”——“默认合理”——“多数人熟练”——“默认 = 高频”——“等级默认设计”——“用户少操作”。
7.5 “其他” 分类的"兜底"
“其他”——“分类兜底”——“未列技能”——“6 分类完整”——“兜底设计”——“分类的包容”——“技能的全覆盖”。
7.6 技能介绍的"可教内容"
“可教内容”——“教什么”——“技能范围”——“教学承诺”——“介绍的价值”——“双向教学的细节”——“技能的质量”。
7.7 发布页的"demo 一致性"
同 34/35/36 表单同构——“系列表单统一”——“标签 + 控件”——“胶囊 + 输入框”——“模板复用”——“跨 App 一致”。
7.8 发布页的"用户场景"
“发布我的技能”——“学生提供技能”——“技能分享”——“交换准备”——“场景驱动”——“发布的实用性”。
7.9 发布页的"反馈体系"
发布成功/请填写技能名称——“两种反馈”——“成功反馈 + 校验反馈”——“反馈完整”——“交互确定性”。
7.11 发布页的"16 间距字段"
Column space 16——“字段间距”——“5 字段的呼吸”——“表单舒适”——“间距层级”——“比 14 更宽松”——“多字段表单的间距”。
7.12 发布页的"44 高输入"
TextInput 44 高——“标准输入高度”——“点击区舒适”——“输入体验”——“同系列输入框”——“表单规范”——“输入的舒适”。
7.13 发布页的"90 高介绍"
TextArea 90 高——“多行介绍”——“技能水平”——“可教内容”——“介绍充分”——“TextArea 高度”——“技能详情的空间”。
补充说明：本篇所有代码引用均基于 38-skill-swap/entry/src/main/ets/pages/Func1Tab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖发布首屏、编程分类切换、熟练程度切换、发布校验 Toast 四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。
发布页的交互细节已在上文完整呈现：技能分类与熟练程度的胶囊选择、表单字段的录入、发布按钮的校验反馈，构成从填表到发布的完整链路，读者可对照源码与配图逐一验证。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献329条内容
所有评论(0)