前言欢迎加入开源鸿蒙跨平台社区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自动获取链接标题和描述支持更多卡片样式选择添加分享到社交平台功能如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
前言欢迎加入开源鸿蒙跨平台社区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自动获取链接标题和描述支持更多卡片样式选择添加分享到社交平台功能如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
