我们又上架了一个鸿蒙项目-止欲

止欲介绍

止欲是一款休闲类的鸿蒙元服务，希望可以通过冥想让繁杂的生活慢下来、静下来。

《止欲》从立项到上架总过程差不多两个月，主要都是我们青蓝的小伙伴在工作止欲抽空完成的，已经实属不易了，我们主要开发者都是 00 后，最年轻的开发者也是才 19 岁。

立项时间是：2025-04-08

上架时间是：2025-06-03

止欲同时也是我们青蓝逐码组织上架的第三个作品了，每个作品都是由初入职场、甚至大学还没有毕业的小伙伴高度参与！

git 日志一览

项目技术细节

项目架构

Serenity/Application/
├── entry/                          # 主模块
│   ├── src/main/
│   │   ├── ets/                    # TypeScript源码
│   │   │   ├── entryability/       # 应用入口能力
│   │   │   ├── entryformability/   # 服务卡片能力
│   │   │   ├── pages/              # 页面文件
│   │   │   ├── view/               # UI组件
│   │   │   ├── utils/              # 工具类
│   │   │   ├── model/              # 数据模型
│   │   │   ├── const/              # 常量定义
│   │   │   └── navigationStack/    # 导航栈管理
│   │   └── resources/              # 资源文件
│   └── module.json5                # 模块配置
├── EntryCard/                      # 服务卡片模块
├── AppScope/                       # 应用级配置
└── oh-package.json5               # 依赖管理

技术栈

• 开发语言: ArkTS (TypeScript)
• UI 框架: ArkUI
• 构建工具: Hvigor
• 包管理: ohpm

核心开发套件 (Kit)

本项目使用了多个 HarmonyOS 官方开发套件：

套件名称	用途	主要 API
@kit.ArkUI	UI 框架和导航	AtomicServiceNavigation, window
@kit.BasicServicesKit	基础服务	BusinessError, request
@kit.MediaLibraryKit	媒体库访问	photoAccessHelper
@kit.CoreFileKit	文件操作	fileIo
@kit.ImageKit	图像处理	image.createImageSource
@kit.PerformanceAnalysisKit	性能分析	hilog
@kit.AbilityKit	应用能力	UIAbility, abilityAccessCtrl

开发环境要求

• HarmonyOS SDK: 5.0.1(13) 或更高版本
• DevEco Studio: 5.0 或更高版本
• 编译目标: HarmonyOS

开发细节

开始立项

分析如何选型

暴躁起来了

成功上架

后续计划

1. 接入登录
2. 接入端云一体
3. 增加趣味性功能
4. 代码开源-分享教程

总结

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯，甚至你想要做出一款属于自己的应用！欢迎在评论区留言或者私信或者看我个人信息，可以加入技术交流群。

HarmonyOS Next 弹窗系列教程（1）

弹窗的介绍

弹窗概述

弹窗一般指打开应用时自动弹出或者用户行为操作时弹出的 UI 界面，用于短时间内展示用户需关注的信息或待处理的操作。

比如以下这些效果：

弹窗的种类

根据用户交互操作场景，弹窗可分为模态弹窗和非模态弹窗两种类型，其区别在于用户是否必须对其做出响应。

• 模态弹窗： 为强交互形式，会中断用户当前的操作流程，要求用户必须做出响应才能继续其他操作，通常用于需要向用户传达重要信息的场景。
• 非模态弹窗： 为弱交互形式，不会影响用户当前操作行为，用户可以不对其进行回应，通常都有时间限制，出现一段时间后会自动消失。一般用于告诉用户信息内容外还需要用户进行功能操作的场景。

模态弹窗

为强交互形式，会中断用户当前的操作流程，要求用户必须做出响应才能继续其他操作，通常用于需要向用户传达重要信息的场景。

非模态弹窗

弹窗的分类

HarmonyOS Next 中将弹窗进行了如下这些分类

弹窗名称	应用场景
弹出框（Dialog）	当需要展示用户当前需要或必须关注的信息内容或操作时，例如二次退出应用等，应优先考虑使用此弹出框。
菜单控制（Menu）	当需要给指定的组件绑定用户可执行的操作时，例如长按图标展示操作选项等，应优先考虑使用此弹窗。
气泡提示（Popup）	当需要给指定的组件提示时，例如点击一个问号图标弹出一段帮助提示等，应优先考虑使用此弹窗。
绑定模态页面（bindContentCover/bindSheet）	当需要新的界面覆盖在旧的界面上，且旧的界面不消失的一种转场方式时，例如缩略图片点击后查看大图等，应优先考虑使用此弹窗。
即时反馈（Toast）	当需要在一个小的窗口中提供用户当前操作的简单反馈时，例如提示文件保存成功等，应用优先考虑使用此弹窗。
设置浮层（OverlayManager）	当需要完全自定义内容、行为、样式时，可以使用浮层将 UI 展示在页面之上，例如音乐/语音播放悬浮球/胶囊等，应优先考虑使用此弹窗。

弹出框概述

用户需在模态弹出框内完成相关交互任务之后，才能退出模态模式。弹出框可以不与任何组件绑定，其内容通常由多种组件组成，如文本、列表、输入框、图片等，以实现布局。ArkUI 当前提供了固定样式和自定义两类弹出框组件。

• 自定义弹出框： 开发者需要根据使用场景，传入自定义组件填充在弹出框中实现自定义的弹出框内容。主要包括基础自定义弹出框 (CustomDialog)、不依赖 UI 组件的自定义弹出框 (openCustomDialog)。
• 固定样式弹出框： 开发者可使用固定样式弹出框，指定需要显示的文本内容和按钮操作，完成简单的交互效果。主要包括警告弹窗 (AlertDialog)、列表选择弹窗 (ActionSheet)、选择器弹窗 (PickerDialog)、对话框 (showDialog)、操作菜单 (showActionMenu)。

openCustomDialog 使用教程

我们分成 3 步来使用openCustomDialog弹窗

1. 创建要显示的内容
2. 声明 UiContext
3. 声明 promptAction
4. 创建要弹窗显示的节点
5. 显示弹窗

创建要显示的内容

使用 @Builder 修饰的不是普通的函数，而是负责渲染节点的内容构造函数。

@Builder
function buildText() {
  Column() {
    Text("自定义标题")
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor('#FFF0F0F0')
}

声明 UiContext

通过getUIContext()接口获取 UI 上下文实例UIContext对象

let uiContext = this.getUIContext();

声明 promptAction

promptAction用于创建并显示文本提示框、对话框和操作菜单。

let promptAction = uiContext.getPromptAction();

创建要弹窗显示的节点

omponentContent表示组件内容的实体封装，其对象支持在非 UI 组件中创建与传递，便于开发者对弹窗类组件进行解耦封装

wrapBuilder 是一个全局函数，功能是用来封装全局@Builder，方便@Builder 传递和调用

let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText));

显示弹窗

最后，调用的 promptAction 的 openCustomDialog 方法，传入 contentNode 便可实现弹窗效果

promptAction.openCustomDialog(contentNode);

完整代码

import { ComponentContent } from '@kit.ArkUI';


@Builder
function buildText() {
  Column() {
    Text("自定义标题")
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor('#FFF0F0F0')
}

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText));
            promptAction.openCustomDialog(contentNode);
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

参考链接

1. wrapBuilder
2. ComponentContent
3. getUIContext
4. getPromptAction