HarmonyOS开发实战：小分享-LinkEditPage链接分享——PreviewCard+Toggle开关

发布时间：2026/7/23 6:23:34

HarmonyOS开发实战：小分享-LinkEditPage链接分享——PreviewCard+Toggle开关
前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net链接分享是小分享 App 中分享链接内容的功能模块用户输入链接后自动生成预览卡片并可通过 Toggle 开关控制显示/隐藏描述文字。本篇讲解 LinkEditPage 的实现涵盖链接预览卡、Toggle 开关、Builder SettingRow、Divider 分割线等核心知识点。详细 API 可参考 HarmonyOS Toggle 官方文档。一、LinkEditPage 完整代码1.1 页面完整实现import router from ohos.router; Entry Component struct LinkEditPage { State linkTitle: string 10个提升效率的工具推荐; State linkUrl: string https://www.example.com/article/123; State showDescription: boolean true; build() { Column() { // Header 导航栏 this.HeaderBar() // 内容区域 Scroll() { Column({ space: 0 }) { this.LinkPreviewCard() this.SettingsGroup() } .padding({ bottom: 20 }) } .layoutWeight(1) } .width(100%).height(100%).backgroundColor(#F5F5F5) } }二、Header 导航栏2.1 三栏布局Row() { Text(‹).fontSize(24).fontColor(#1A1A1A).onClick(() { router.back() }) Text(链接分享).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1).textAlign(TextAlign.Center) Text(完成).fontSize(16).fontColor(#F5A623).onClick(() { router.pushUrl({ url: pages/SharePreviewPage }) }) } .width(100%).padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)位置内容功能样式左侧‹返回router.back()居中链接分享标题18px Bold右侧完成跳转预览#F5A623三、链接预览卡3.1 预览卡结构Column({ space: 12 }) { Text(this.linkTitle).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#1A1A1A).width(100%) Text(this.linkUrl).fontSize(13).fontColor(#2196F3).width(100%) Text(这是一篇关于效率工具推荐的文章...).fontSize(13).fontColor(#666666).lineHeight(22).width(100%) Column() { Text().fontSize(40) } .width(100%).height(120).backgroundColor(#E3F2FD).borderRadius(8) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) } .width(100%).padding(16).backgroundColor(#F8F9FA).borderRadius(12) .margin({ left: 16, right: 16, top: 16 })3.2 预览卡布局Column (白色卡片圆角 12背景 #F8F9FA) ├─ Text(标题) 16px 粗体 ├─ Text(URL) 13px 蓝色 ├─ Text(描述) 13px 灰色lineHeight 22 └─ Column(缩略图) 100%×120蓝色背景 #E3F2FD四、Toggle 开关组件4.1 基本用法Toggle({ type: ToggleType.Switch, isOn: this.showDescription }) .selectedColor(#F5A623) .onChange((isOn: boolean) { this.showDescription isOn })4.2 ToggleType 类型类型视觉效果适用场景ToggleType.Switch滑动开关开/关切换ToggleType.Checkbox复选框多选ToggleType.Button按钮分组选择4.3 代码块示例// Switch 开关 Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(#F5A623) .onChange((isOn) { console.info(Switch: isOn) }) // Checkbox 复选框 Toggle({ type: ToggleType.Checkbox, isOn: false }) .onChange((isOn) { console.info(Checkbox: isOn) }) // Button 按钮 Toggle({ type: ToggleType.Button, isOn: true }) .onChange((isOn) { console.info(Button: isOn) })五、Builder SettingRow5.1 Builder 定义Builder SettingRow(label: string, arrow: string) { Row() { Text(label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Text(arrow).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }) }5.2 设置区布局Column({ space: 0 }) { this.SettingRow(标题样式, ›) Divider().color(#EEEEEE) this.SettingRow(卡片样式, ›) Divider().color(#EEEEEE) this.SettingRow(封面图片, ›) Divider().color(#EEEEEE) Row() { Text(描述文字).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.showDescription }) .selectedColor(#F5A623) .onChange((isOn: boolean) { this.showDescription isOn }) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }) } .width(100%).backgroundColor(Color.White) .margin({ left: 16, right: 16, top: 16 }).borderRadius(12)六、Divider 分割线6.1 基本用法Divider().color(#EEEEEE)6.2 Divider 属性属性作用示例值color分割线颜色#EEEEEEstrokeWidth线宽0.5lineCap端点样式LineCapStyle.Round七、State 状态管理7.1 状态声明State linkTitle: string 10个提升效率的工具推荐; State linkUrl: string https://www.example.com/article/123; State showDescription: boolean true;7.2 Toggle 绑定Toggle({ type: ToggleType.Switch, isOn: this.showDescription }) .onChange((isOn: boolean) { this.showDescription isOn // 状态更新 })八、Builder 复用8.1 定义与调用// 定义 Builder SettingRow(label: string, arrow: string) { Row() { Text(label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Text(arrow).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }) } // 调用 this.SettingRow(标题样式, ›) this.SettingRow(卡片样式, ›)九、常见问题9.1 问题 1Toggle 状态不更新原因isOn没有与State变量绑定。解决确保isOn使用State变量并在onChange中更新。9.2 问题 2Divider 不显示原因Column 没有设置width(100%)。解决给 Divider 的父容器设置width(100%)。十、核心知识点10.1 技术要点链接预览卡包含标题、URL、描述、缩略图Toggle 开关控制描述文字显示/隐藏Builder SettingRow 封装设置项Divider 分割线保持视觉层次10.2 实战建议Toggle 的isOn与 State 绑定selectedColor自定义主题色Divider 分割线保持视觉层次总结本文详细讲解了 LinkEditPage 链接分享编辑器的完整实现从链接预览卡、Toggle 开关、Builder SettingRow到Divider 分割线涵盖了链接分享的全部核心功能。下一篇我们将深入 PreviewPage 线装本排版预览的实现。附录链接分享编辑器的完整实现细节1. 完整的页面结构Column (主容器背景 #F5F5F5) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回 │ ├─ Text(链接分享) 标题 │ └─ Text(完成) 跳转 ├─ Scroll (可滚动内容区) - layoutWeight(1) │ └─ Column (space: 0) │ ├─ Column (链接预览卡) - #F8F9FA 背景 │ │ ├─ Text(标题) 16px │ │ ├─ Text(URL) 13px 蓝色 │ │ ├─ Text(描述) 13px 灰色 │ │ └─ Column(缩略图) 100%×120px │ └─ Column (设置区) - 白色背景 │ ├─ SettingRow(标题样式) │ ├─ Divider │ ├─ SettingRow(卡片样式) │ ├─ Divider │ ├─ SettingRow(封面图片) │ ├─ Divider │ └─ Row (描述文字 Toggle) └─ (无底部导航栏)2. 设置区完整实现Column({ space: 0 }) { this.SettingRow(标题样式, ›) Divider().color(#EEEEEE) this.SettingRow(卡片样式, ›) Divider().color(#EEEEEE) this.SettingRow(封面图片, ›) Divider().color(#EEEEEE) Row() { Text(描述文字).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.showDescription }) .selectedColor(#F5A623) .onChange((isOn: boolean) { this.showDescription isOn }) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }) } .width(100%).backgroundColor(Color.White).margin({ left: 16, right: 16, top: 16 }).borderRadius(12)3. Toggle 开关的三种类型类型代码视觉效果SwitchToggleType.Switch滑动开关CheckboxToggleType.Checkbox复选框ButtonToggleType.Button按钮4. Builder SettingRow 的实现Builder SettingRow(label: string, arrow: string) { Row() { Text(label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Text(arrow).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }) }5. 链接预览卡的设计要点元素样式说明标题16px, Medium, #1A1A1A链接文章标题URL13px, #2196F3链接地址蓝色可点击描述13px, #666666文章摘要描述缩略图100%×120, #E3F2FD蓝色背景占位图6. 路由跳转策略按钮目标API说明‹ 返回上一页router.back()返回选择页完成SharePreviewPagerouter.pushUrl()跳转分享预览7. 与文字编辑器的对比对比维度LinkEditPageTextEditPage输入类型链接 URL文本内容预览卡自动生成链接预览手动编辑文字设置项标题样式/卡片样式/封面/描述样式/排版/背景/配图核心组件Toggle 开关TextArea 多行输入背景色#F5F5F5#FFFFFF8. 数据模型State linkTitle: string 10个提升效率的工具推荐 State linkUrl: string https://www.example.com/article/123 State showDescription: boolean true9. 完整代码索引文件路径说明pages/LinkEditPage.ets链接分享编辑器页面common/interfaces.ets公共接口定义10. 本文涉及的所有 APIAPI/组件用途文档Toggle开关组件Toggle ReferenceDivider分割线Divider ReferenceBuilderUI 复用Builder GuideState状态管理State Guiderouter.pushUrl()路由跳转Router APIrouter.back()返回Router API以上 API 的详细用法可参考 HarmonyOS 官方文档。11. 实现要点总结链接分享编辑器的核心实现要点链接预览卡自动生成包含标题、URL、描述、缩略图的预览卡片Toggle 开关控制描述文字的显示/隐藏selectedColor自定义主题色Builder 封装SettingRow封装设置项ShareButton封装分享按钮Divider 分割线设置项之间的视觉分隔State 状态管理showDescription控制 Toggle 状态下一步优化方向集成真实链接解析 API自动获取链接标题和描述支持更多卡片样式选择添加分享到社交平台功能如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

测试文章 002244 - 请忽略

测试文章 002244 - 请忽略

这是一篇测试文章，用于验证账号状态，将立即删除。

2026/7/23 6:23:34 阅读更多 →
嵌入式看门狗定时器原理与API实战：从硬件机制到软件设计

嵌入式看门狗定时器原理与API实战：从硬件机制到软件设计

1. 嵌入式系统看门狗定时器原理与API函数详解在嵌入式系统开发领域，尤其是涉及工业控制、汽车电子或物联网设备时，系统一旦“跑飞”或陷入死锁，轻则功能异常，重则引发安全事故。作为一名在嵌入式一线摸爬滚打了十多年的工程师&…

2026/7/23 6:23:34 阅读更多 →
PHP-FPM进程管理原理与高并发优化实践

PHP-FPM进程管理原理与高并发优化实践

1. PHP-FPM核心概念解析PHP-FPM（FastCGI Process Manager）是PHP官方提供的FastCGI进程管理器实现，专门为高负载场景设计。与传统的PHP-CGI相比，它通过进程池管理和优化资源分配，显著提升了PHP应用的并发处理能力。1.1 …

2026/7/23 6:22:34 阅读更多 →

最新新闻

检索增强生成效果的量化评测：从检索质量到生成质量的传递链分析

检索增强生成效果的量化评测：从检索质量到生成质量的传递链分析

检索增强生成效果的量化评测：从检索质量到生成质量的传递链分析检索增强生成（RAG）将外部知识检索与语言模型生成相结合，但其效果评测长期依赖端到端的生成指标。本文提出一种分层评测框架，将评测链路拆解为检索质量、上…

2026/7/23 7:07:47 阅读更多 →
形态学进阶：骨架提取与细化算法实战

形态学进阶：骨架提取与细化算法实战

形态学进阶：骨架提取与细化算法实战📚 本章学习目标：深入理解骨架提取与细化算法实战的核心概念与实践方法，掌握关键技术要点，了解实际应用场景与最佳实践。本文属于《计算机视觉教程》图像分割与形态学篇（…

2026/7/23 7:07:47 阅读更多 →
做一个能用的 BIM 引擎，到底要踩多少坑？

做一个能用的 BIM 引擎，到底要踩多少坑？

目前市面上的 BIM 引擎不少，各家特色鲜明。但要真正做出一个能用的引擎，到底需要做哪些工作？结合我们自研 TinyBIM 引擎的经验，我把它总结为三步。 第一步：先把"看起来"做好 一个引擎，渲染效果必…

2026/7/23 7:07:47 阅读更多 →
AI流量争夺战必看！选错损失百万：2026国内专业靠谱GEO管理系统权威排行榜

AI流量争夺战必看！选错损失百万：2026国内专业靠谱GEO管理系统权威排行榜

开篇核心结论（2026年7月实测汇总）综合自研语义底座、全平台适配覆盖、合规资质体系、长效工程交付四大核心维度横向实测，当前市面上专业靠谱GEO管理系统梯队已清晰划分：新榜智汇综合实力稳居行业首位，是适配国内全AI生…

2026/7/23 7:07:47 阅读更多 →
AMD提出Agent Computer概念，PC与AC未来能否共存？

AMD提出Agent Computer概念，PC与AC未来能否共存？

AMD推出Agent Computer，定义全新算力设备在PC行业发展遇阻，消费者换机意愿低迷的当下，AMD提出了“Agent Computer（AC）”这一全新概念。AC是一种专供AI Agent长期运行的设备，主打始终在线、始终可用、始终工…

2026/7/23 7:07:47 阅读更多 →
从“一问一答“到“自主运转“：AI 应用形态的三次进化与技术体验

从“一问一答“到“自主运转“：AI 应用形态的三次进化与技术体验

从"一问一答"到"自主运转"：AI 应用形态的三次进化与技术体验引言过去两年，大模型的能力边界被反复讨论，但有一个变化相对少被提及：AI 与人的协作方式，本身也在发生结构性的变化。本文不讨论模型能…

2026/7/23 7:06:47 阅读更多 →

日新闻

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

更多请点击： https://intelliparadigm.com 第一章：从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表） 当AI副业主理人不再仅满足于单次服务交付，而是主动构建可复用、可裂变、可…

2026/7/23 0:00:25 阅读更多 →
AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析

AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析

更多请点击： https://codechina.net 第一章：AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析 在对2,346篇跨行业AI生成文案的A/B测试数据进行聚类分析后，我们发现&#xff1…

2026/7/23 0:01:26 阅读更多 →
Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具 【免费下载链接】chitchatter Secure peer-to-peer chat that is serverless, decentralized, and ephemeral 项目地址: https://gitcode.com/gh_mirrors/ch/chitchatter Chitchatter是一款革命性的安…

2026/7/23 0:01:26 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/22 8:58:19 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/22 19:43:43 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/22 12:54:44 阅读更多 →

月新闻