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

发布时间：2026/10/13 12:13:40

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/10/7 9:37:53 阅读更多 →
嵌入式看门狗定时器原理与API实战：从硬件机制到软件设计

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

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

2026/9/29 16:31:25 阅读更多 →
PHP-FPM进程管理原理与高并发优化实践

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

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

2026/10/14 3:31:22 阅读更多 →

最新新闻

Cangjie std.collection 集合库全解析：数据结构、迭代器函数与实战示例

Cangjie std.collection 集合库全解析：数据结构、迭代器函数与实战示例

人工智能AI 技能文档开发工具 【免费下载链接】DocAgent 项目地址： https://gitcode.com/Cangjie-SIG/DocAgent 点击查看 免费下载 std.collection 是 Cangjie 标准库中提供常见数据结构高效实现、抽象接口定义以及集合操作通用函数的包。它覆盖了列表、双端队列、…

2026/10/14 8:14:51 阅读更多 →
SpringBoot3+Vue3全栈失物招领系统开发实践

SpringBoot3+Vue3全栈失物招领系统开发实践

1. 项目概述与适用场景失物招领系统作为校园和社区场景中的高频需求应用，结合SpringBoot3和Vue3的技术栈实现，既符合现代企业级开发规范，又具备教学演示价值。这个全栈项目采用前后端分离架构，后端使用SpringBoot3提供RESTful API…

2026/10/14 8:14:51 阅读更多 →
方向阻抗继电器原理与输电线路保护实践

方向阻抗继电器原理与输电线路保护实践

1. 输电线路保护的核心挑战与方向阻抗继电器原理在高压输电线路保护领域，距离保护作为主保护的核心组成部分，其可靠性直接关系到整个电网的安全运行。传统过电流保护在长距离、重负荷线路中往往难以满足选择性要求，而方向阻抗继电器通过测量故…

2026/10/14 8:14:51 阅读更多 →
编程中的反斜杠：转义字符原理与应用详解

编程中的反斜杠：转义字符原理与应用详解

1. 反斜杠符号的基础认知在编程世界里，反斜杠（\）这个看似简单的符号，实际上承担着多种关键职责。第一次在代码中见到它时，我误以为只是个普通的标点符号，直到它在字符串处理中给我制造了无数bug后&#xff…

2026/10/14 8:14:51 阅读更多 →
SMT专业词汇翻译实战：建术语库、定规则、避坑指南

SMT专业词汇翻译实战：建术语库、定规则、避坑指南

简介：面向电子制造从业者的SMT专业词汇翻译文档，汇总了14个高频术语，覆盖表面贴装技术（SMT）、表面贴装器件（SMD）、印刷电路板组装（PCBA）等基础概念，以及从锡膏…

2026/10/14 8:14:51 阅读更多 →
卡尔曼滤波从原理到实战：行人多目标追踪与检测框平滑全解析

卡尔曼滤波从原理到实战：行人多目标追踪与检测框平滑全解析

目标追踪是个看着简单、做着上头的问题。想象一个监控摄像头，一个人从画面左侧走到右侧，中间被柱子挡住两秒，再出现时，系统要能认出还是同一个人，把轨迹连续画出来。就这么个场景，背后其实压着两个问题&…

2026/10/14 8:13:51 阅读更多 →

日新闻

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/14 3:30:28 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

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

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

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

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

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

2026/10/14 3:29:58 阅读更多 →

月新闻

我发现了一个新思路：用 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/14 7:53:34 阅读更多 →