前言

欢迎加入开源鸿蒙跨平台社区：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 SettingRow

5.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	分割线颜色	'#EEEEEE'
strokeWidth	线宽	0.5
lineCap	端点样式	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 问题 1：Toggle 状态不更新

原因：isOn 没有与 @State 变量绑定。

解决：确保 isOn 使用 @State 变量，并在 onChange 中更新。

9.2 问题 2：Divider 不显示

原因：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 开关的三种类型

类型	代码	视觉效果
Switch	ToggleType.Switch	滑动开关
Checkbox	ToggleType.Checkbox	复选框
Button	ToggleType.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	链接文章标题
URL	13px, #2196F3	链接地址（蓝色可点击）
描述	13px, #666666	文章摘要描述
缩略图	100%×120, #E3F2FD	蓝色背景占位图

6. 路由跳转策略

按钮	目标	API	说明
‹ 返回	上一页	router.back()	返回选择页
完成	SharePreviewPage	router.pushUrl()	跳转分享预览

7. 与文字编辑器的对比

对比维度	LinkEditPage	TextEditPage
输入类型	链接 URL	文本内容
预览卡	自动生成链接预览	手动编辑文字
设置项	标题样式/卡片样式/封面/描述	样式/排版/背景/配图
核心组件	Toggle 开关	TextArea 多行输入
背景色	#F5F5F5	#FFFFFF

8. 数据模型

@State linkTitle: string = '10个提升效率的工具推荐'
@State linkUrl: string = 'https://www.example.com/article/123'
@State showDescription: boolean = true

9. 完整代码索引

文件路径	说明
pages/LinkEditPage.ets	链接分享编辑器页面
common/interfaces.ets	公共接口定义

10. 本文涉及的所有 API

API/组件	用途	文档
Toggle	开关组件	Toggle Reference
Divider	分割线	Divider Reference
@Builder	UI 复用	Builder Guide
@State	状态管理	State Guide
router.pushUrl()	路由跳转	Router API
router.back()	返回	Router API

以上 API 的详细用法可参考 HarmonyOS 官方文档。

11. 实现要点总结

链接分享编辑器的核心实现要点：

1. 链接预览卡：自动生成包含标题、URL、描述、缩略图的预览卡片
2. Toggle 开关：控制描述文字的显示/隐藏，selectedColor 自定义主题色
3. @Builder 封装：SettingRow 封装设置项，ShareButton 封装分享按钮
4. Divider 分割线：设置项之间的视觉分隔
5. @State 状态管理：showDescription 控制 Toggle 状态

下一步优化方向：

• 集成真实链接解析 API，自动获取链接标题和描述
• 支持更多卡片样式选择
• 添加分享到社交平台功能

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！