鸿蒙原生应用 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”。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、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 结构Column16 间距 5 个字段区 16 padding 白底 20 圆角 1px 边框——“技能表单卡”——“比 34/35/36 多 2 个字段”。3.1 我能提供的技能TextInputText(我能提供的技能)13 号灰标签——“字段名”——“提供技能”——“我能 提供者视角”。TextInput({ placeholder: 例如吉他弹唱、PS修图 })输入框——“占位示例”——“44 高”——“浅灰底”——“技能名称”——“同首页技能名”。onChange((v: string) { this.skillName v; })值绑定——“skillName 状态”——“输入即更新”——“发布校验依据”。3.2 技能分类6 胶囊 FlexText(技能分类)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”——“默认熟练idx1”——“等级选择”。“默认熟练” 的合理——“activeLevel 1”——“熟练 中间等级”——“默认合理”——“用户可改”。与 App 34/35/36 胶囊对比——“34 课程/35 类型/36 成色都是 Flex 换行”——“38 熟练度用等宽 Row”——“两种胶囊布局”——“38 的等宽创新”——“分类换行 vs 等级等宽”。3.4 想交换的技能TextInputText(想交换的技能)13 号灰标签——“字段名”——“想学技能”——“双向技能”——“交换需求”。TextInput({ placeholder: 你想学什么 })输入框——“占位”——“想学内容”——“44 高”——“交换条件”。onChange((v: string) { this.wantSkill v; })值绑定——“wantSkill 状态”——“想学技能”——“与首页 想学 呼应”。3.5 技能介绍TextAreaText(技能介绍)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 个 StateskillName/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。发布页的交互细节已在上文完整呈现技能分类与熟练程度的胶囊选择、表单字段的录入、发布按钮的校验反馈构成从填表到发布的完整链路读者可对照源码与配图逐一验证。