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

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

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

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

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

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

2026/7/23 6:23:31阅读更多 →
TI Cortex-M ROM API实战：CRC-16、Flash编程与GPIO控制详解

TI Cortex-M ROM API实战：CRC-16、Flash编程与GPIO控制详解

1. 项目概述在嵌入式开发的日常工作中，我们常常需要与硬件底层直接对话，无论是为了确保一段关键代码在Flash中安全无虞，还是为了验证一串数据在传输过程中是否“完好无损”，又或者只是想让一个LED灯按照我们的意愿闪烁。这些看似基…

2026/7/23 6:21:31阅读更多 →
Qwen3-TTS 12Hz Tokenizer与Unity3D集成：游戏动态语音生成实战

Qwen3-TTS 12Hz Tokenizer与Unity3D集成：游戏动态语音生成实战

1. 项目概述：当Qwen3-TTS遇上Unity3D最近在捣鼓一个独立游戏项目，角色对话系统想做得更有沉浸感，不想再用那些千篇一律的预制语音包了。正好看到通义千问团队开源了Qwen3-TTS，一个文本转语音模型，效果听起来相当自然。…

2026/7/23 7:39:43阅读更多 →
CentOS7 运维入门：系统性能监控 + systemd 服务完整实操教程

CentOS7 运维入门：系统性能监控 + systemd 服务完整实操教程

导语 玩 Linux 运维，绕不开两大核心技能：服务器性能排查 和 后台服务管理。 平时线上服务器卡顿、程序后台跑丢、重启后业务起不来，90% 的问题都能用这两套知识解决。 CentOS7 彻底抛弃了老旧 SysV 启动体系，全面采用 systemd 作为…

2026/7/23 7:39:43阅读更多 →
西门子S7-200 SMART编程软件安装与配置全攻略

西门子S7-200 SMART编程软件安装与配置全攻略

1. 西门子S7-200 SMART编程软件安装指南作为一名从事工业自动化多年的工程师，我深知西门子S7-200 SMART系列PLC在中小型自动化项目中的广泛应用。而STEP 7-Micro/WIN SMART作为其专用编程软件，是每位自动化工程师必须掌握的工具。今天我将详细介绍V2.8版…

2026/7/23 7:39:43阅读更多 →
EEPROM编程安全指南：错误处理、初始化与寿命管理

EEPROM编程安全指南：错误处理、初始化与寿命管理

1. EEPROM在嵌入式系统中的角色与挑战在嵌入式开发里，数据掉电不丢是个硬需求。无论是保存设备的校准参数、运行日志，还是用户的自定义配置，我们都需要一块可靠的“电子笔记本”。EEPROM（电可擦可编程只读存储器）就是干…

2026/7/23 7:39:43阅读更多 →
技术创作者的内容安全规范与实践

技术创作者的内容安全规范与实践

我理解您的要求，但根据内容安全规范，涉及政治、意识形态及敏感话题的内容不在创作范围内。作为技术型创作者，我将严格遵守安全原则，专注于科技、生活、职场等非敏感领域的实用内容创作。如果您有其他技术类或生活类项目需求&#…

2026/7/23 7:39:43阅读更多 →
Claude---s1---框架梳理

Claude---s1---框架梳理

详细数据流转：1️⃣ 用户发起指令与系统组装 (CLI & Initialization)用户动作：在终端输入 RuiZN run --goal "读取当前目录下的 README.md"。数据流转：cli/main.py 接收到原生命令行参数，argparse 将其解析为字符串…

2026/7/23 7:37:43阅读更多 →
Go语言静态资源打包方案对比与实践指南

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

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

2026/7/23 0:56:31阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

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

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

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

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

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

2026/7/23 0:56:31阅读更多 →
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:00:28阅读更多 →
从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

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

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

2026/7/23 0:00:28阅读更多 →
油泥处理设备哪里能买到

油泥处理设备哪里能买到

油泥处理设备哪里有？这是许多从事油田、炼化、清罐业务的从业者最关心的问题。根据河南三丰环保设备有限公司的行业经验，选购油泥处理设备的核心在于设备能否适配当地环保法规与原料特性，而非单纯看价格。该公司总经理王钦田先生指出&#xf…

2026/7/23 0:00:28阅读更多 →
YOLOv8推理性能优化：从1.2FPS到35FPS的全链路加速实践

YOLOv8推理性能优化：从1.2FPS到35FPS的全链路加速实践

如果你在部署 YOLOv8 时，发现推理速度只有可怜的 1-2 FPS，而别人的演示视频却能跑到 30 FPS 以上，那么问题很可能不在模型本身，而在于你的整个处理链路。很多开发者拿到一个训练好的 YOLOv8 模型后，会直接使用官方示例…

2026/7/22 22:56:18阅读更多 →
Coze与Dify对比指南：低代码AI应用开发从入门到实战

Coze与Dify对比指南：低代码AI应用开发从入门到实战

1. 从零到一：为什么你需要了解 Coze 和 Dify？如果你对 AI 应用开发感兴趣，但一看到“大模型”、“智能体”、“工作流”这些词就头疼，觉得门槛太高，那这篇文章就是为你准备的。很多开发者，包括我自己&#…

2026/7/22 18:55:50阅读更多 →
AI生图工具怎么选？2026年6月版实测对比

AI生图工具怎么选？2026年6月版实测对比

做自媒体的朋友应该都有体会：配图一直是个让人头疼的问题。2026年，AI生图工具已经非常成熟了，但工具太多反而不知道怎么选。以下是截至2026年6月我对主流AI生图工具的实测对比。Midjourney V8.1：速度之王2026年6月11日&#xff0c…

2026/7/22 18:55:50阅读更多 →