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

前言创建分享选择器是用户进入分享流程的第一步选择要分享的内容类型文字、图片、链接、笔记。本篇以小分享 App 的CreateSelectPage为例讲解列表选项的设计、图标徽章样式、阴影卡片和跳转分发。详细 API 可参考 HarmonyOS ArkUI 组件官方文档。一、CreateSelectPage 完整代码1.1 数据定义private shareOptions: ArrayShareOption [ { 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×4812vp 圆角) │ └─ 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阴影半径2color阴影颜色#08000000offsetXX 偏移默认 0offsetYY 偏移13.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 创建选择器设计要点创建选择器设计要点总结如下列表选项使用白色卡片 阴影每种类型有独特的图标和颜色图标徽章 48×4812vp 圆角点击跳转对应的编辑页面7.2 阴影配置阴影配置要点总结如下radius控制阴影大小color控制阴影透明度和颜色offsetY控制阴影方向总结本文详细讲解了 CreateSelectPage 创建分享选择器的列表选项设计、图标徽章、阴影卡片、Header 导航栏和路由跳转。下一篇我们将看 ShareCard 通用分享卡片组件设计。附录完整实现细节1. 核心 API 参考API作用说明本文涉及的核心 API功能实现参见华为官方文档2. 完整代码示例// 核心功能代码 // 详见正文中的完整实现3. 常见问题排查问题原因解决方案编译错误import 路径错误检查路径和 API 版本运行时异常参数不合法使用 try/catch 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 try/catch 包裹资源及时释放避免内存泄漏异步操作使用 async/await权限配置完整按需申请5. 完整代码文件索引文件路径说明本文涉及的代码文件见正文6. 实现要点总结核心实现要点API 的正确使用方法和参数说明完整的代码实现流程常见问题的排查方案性能优化和安全建议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 开发的完整流程。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力