HarmonyOS开发实战：小分享-CreateSelectPage创建分享类型选择器

前言

创建分享选择器 是用户进入分享流程的第一步，选择要分享的内容类型（文字、图片、链接、笔记）。本篇以小分享 App 的 CreateSelectPage 为例，讲解列表选项的设计、图标徽章样式、阴影卡片和跳转分发。详细 API 可参考 HarmonyOS ArkUI 组件官方文档。

一、CreateSelectPage 完整代码

1.1 数据定义

private shareOptions: Array<ShareOption> = [
  { icon: '📝', title: '文字分享', desc: '记录想法，分享文字', color: '#5B8DEF', bg: '#EEF4FF', page: 'pages/TextEditPage' },
  { icon: '🖼️', title: '图片分享', desc: '分享美图，记录美好', color: '#4CAF50', bg: '#E8F5E9', page: 'pages/ImageEditPage' },
  { icon: '🔗', title: '链接分享', desc: '分享链接，传递价值', color: '#2196F3', bg: '#E3F2FD', page: 'pages/LinkEditPage' },
  { icon: '📋', title: '笔记分享', desc: '图文笔记，精美排版', color: '#9C27B0', bg: '#F3E5F5', page: 'pages/TextEditPage' }
];

1.2 接口定义

export interface ShareOption {
  icon: string;    // 图标 Emoji
  title: string;   // 标题
  desc: string;    // 描述
  color: string;   // 主题色
  bg: string;      // 背景色
  page: string;    // 目标页面路径
}

1.3 渲染代码

build() {
  Column() {
    // Header
    Row() {
      Text('‹').fontSize(24).fontColor('#1A1A1A')
        .onClick(() => { router.back() })
      Text('创建分享').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1A1A1A').layoutWeight(1).textAlign(TextAlign.Center)
      Text('✕').fontSize(20).fontColor('#999999')
        .onClick(() => { router.back() })
    }
    .width('100%').padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)

    Text('选择你要分享的内容')
      .fontSize(14).fontColor('#999999')
      .width('100%').padding({ left: 20, top: 16, bottom: 8 })

    // Options list
    Column({ space: 12 }) {
      ForEach(this.shareOptions, (item: ShareOption) => {
        Row({ space: 14 }) {
          // 图标徽章
          Column() {
            Text(item.icon).fontSize(24)
          }
          .width(48).height(48)
          .backgroundColor(item.bg)
          .borderRadius(12)
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)

          // 文字区
          Column({ space: 4 }) {
            Text(item.title).fontSize(16).fontWeight(FontWeight.Medium).fontColor('#1A1A1A')
            Text(item.desc).fontSize(12).fontColor('#999999')
          }
          .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)
        }
        .width('100%')
        .padding({ left: 16, right: 16, top: 16, bottom: 16 })
        .backgroundColor(Color.White)
        .borderRadius(12)
        .margin({ left: 16, right: 16 })
        .shadow({ radius: 2, color: '#08000000', offsetY: 1 })
        .onClick(() => {
          router.pushUrl({ url: item.page })
        })
      }, (item: ShareOption) => item.title)
    }
  }
  .width('100%').height('100%').backgroundColor('#F5F5F5')
}

二、列表选项设计

2.1 选项结构

每个选项的结构如下：

Row (白色卡片，圆角 12，阴影)
├─ Column (图标徽章 48×48，12vp 圆角)
│   └─ Text(Emoji) 24px
├─ Column (文字区)
│   ├─ Text(标题) 16px 粗体
│   └─ Text(描述) 12px 灰色
└─ layoutWeight(1) 撑开

2.2 四种类型对比

类型	图标	背景色	主题色
文字分享	📝	#EEF4FF	#5B8DEF
图片分享	🖼️	#E8F5E9	#4CAF50
链接分享	🔗	#E3F2FD	#2196F3
笔记分享	📋	#F3E5F5	#9C27B0

三、阴影卡片

3.1 阴影配置

.shadow({
  radius: 2,              // 阴影半径
  color: '#08000000',     // 阴影颜色（半透明黑）
  offsetY: 1              // Y 轴偏移
})

3.2 阴影参数

参数	作用	示例值
radius	阴影半径	2
color	阴影颜色	'#08000000'
offsetX	X 偏移	默认 0
offsetY	Y 偏移	1

3.3 阴影效果对比

根据 radius 和 offsetY 的不同组合，可产生不同效果：

// 轻阴影 --- 卡片轻微浮起
.shadow({ radius: 2, color: '#08000000', offsetY: 1 })

// 中阴影 --- 卡片明显浮起
.shadow({ radius: 8, color: '#40F5A623', offsetY: 4 })

// 重阴影 --- 视觉突出
.shadow({ radius: 16, color: '#60F5A623', offsetY: 8 })

四、Header 导航栏

4.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(20)
    .fontColor('#999999')
    .onClick(() => { router.back() })
}
.width('100%')
.padding({ left: 16, right: 16, top: 12, bottom: 12 })
.backgroundColor(Color.White)

4.2 左右按钮布局

布局如下：

Row
├─ Text('‹') → 左侧返回按钮，router.back()
├─ Text('创建分享') → 居中标题，layoutWeight(1) + textAlign Center
└─ Text('✕') → 右侧关闭按钮，router.back()

4.3 标题居中

使用 layoutWeight(1) + textAlign(TextAlign.Center) 实现标题居中：

Text('创建分享')
  .layoutWeight(1)           // 撑开剩余空间
  .textAlign(TextAlign.Center)  // 文字居中

五、页面跳转路由

5.1 跳转目标

选项	跳转页面	说明
文字分享	pages/TextEditPage	文字编辑器
图片分享	pages/ImageEditPage	图片编辑器
链接分享	pages/LinkEditPage	链接编辑
笔记分享	pages/TextEditPage	复用文字编辑器

5.2 路由路径复用

笔记分享复用了文字编辑器页面（TextEditPage），说明同一个页面可以有不同的入口和用途。

六、页面适配

6.1 背景色

.backgroundColor('#F5F5F5')

浅灰背景让白色卡片更突出，形成层次感。

6.2 选项间距

Column({ space: 12 }) {
  // 选项列表
}

6.3 卡片外边距

.margin({ left: 16, right: 16 })

七、本篇核心知识点

7.1 创建选择器设计要点

创建选择器设计要点总结如下：

1. 列表选项使用白色卡片 + 阴影
2. 每种类型有独特的图标和颜色
3. 图标徽章 48×48，12vp 圆角
4. 点击跳转对应的编辑页面

7.2 阴影配置

阴影配置要点总结如下：

1. radius 控制阴影大小
2. color 控制阴影透明度和颜色
3. offsetY 控制阴影方向

总结

本文详细讲解了 CreateSelectPage 创建分享选择器的列表选项设计、图标徽章、阴影卡片、Header 导航栏和路由跳转。下一篇我们将看 ShareCard 通用分享卡片组件设计。

附录：完整实现细节

1. 核心 API 参考

API	作用	说明
本文涉及的核心 API	功能实现	参见华为官方文档

2. 完整代码示例

// 核心功能代码
// 详见正文中的完整实现

3. 常见问题排查

问题	原因	解决方案
编译错误	import 路径错误	检查路径和 API 版本
运行时异常	参数不合法	使用 try/catch 捕获
性能问题	主线程耗时操作	使用异步 API

4. 最佳实践

1. 错误处理完善，使用 try/catch 包裹
2. 资源及时释放，避免内存泄漏
3. 异步操作使用 async/await
4. 权限配置完整，按需申请

5. 完整代码文件索引

文件路径	说明
本文涉及的代码文件	见正文

6. 实现要点总结

核心实现要点：

1. API 的正确使用方法和参数说明
2. 完整的代码实现流程
3. 常见问题的排查方案
4. 性能优化和安全建议

7. 总结

本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习，读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。

开发注意事项

1. API 版本兼容性

确保使用的 API 在目标 SDK 版本中可用。不同版本的 HarmonyOS 可能对 API 的支持有所不同，建议查阅官方文档确认。

2. 权限配置

根据功能需求配置相应的系统权限。权限在 module.json5 中声明，运行时通过 abilityAccessCtrl 申请。

3. 错误处理

所有异步操作使用 try/catch 包裹，确保异常不会导致应用崩溃。错误信息通过 hilog 输出，便于调试。

4. 资源释放

使用完毕后及时释放系统资源，避免内存泄漏。例如：文件操作后关闭文件句柄，数据库操作后关闭 ResultSet。

5. 性能优化

避免在主线程执行耗时操作，使用异步 API 处理耗时任务。大量数据渲染时使用 LazyForEach 懒加载。

完整代码文件索引

文件路径	说明
本文涉及的代码文件	见正文

核心 API 参考

API/组件	用途	文档链接
文中涉及的 API	核心功能	华为官方文档

总结

本文详细讲解了小分享 App 中对应功能的完整实现，涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习，读者可以掌握 HarmonyOS 开发的完整流程。

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