在这里插入图片描述

1. 应用概述

厨房定时器（KitchenTimer）是一款基于HarmonyOS ArkTS框架开发的烹饪计时工具，其核心功能是帮助用户在厨房烹饪过程中精确计时。无论是煮面、焖饭、蒸菜还是烘焙，这款应用都能提供直观的倒计时显示和进度反馈，让烹饪过程更加从容有序。

在技术实现层面，厨房定时器充分展示了HarmonyOS声明式UI开发范式的核心能力。通过Circle组件实现圆环进度可视化，Slider组件实现时长设置，@State装饰器实现响应式状态管理，以及计时逻辑的精确控制，构成了一个功能完整、交互流畅的厨房助手应用。应用的代码结构清晰简洁，使用HarmonyOS原生API完成所有功能实现，没有引入任何复杂的第三方依赖。

本技术博客将从应用架构设计、核心代码实现、圆环进度绘制原理、Slider组件使用、数据绑定机制、状态管理以及生命周期管理等多个维度，对这款厨房定时器应用进行全面的技术剖析。通过本文的深入讲解，读者不仅能够理解如何实现一个功能完善的厨房定时器应用，更能够掌握HarmonyOS ArkTS开发中的核心知识点，特别是Circle组件的自定义属性、Slider滑块交互、Stack布局容器以及计时逻辑等关键技术点。

2. 技术架构分析

2.1 整体架构设计

厨房定时器应用采用了单页面架构（Single Page Application），整个应用仅包含一个主页面，通过组件化设计将UI展示与业务逻辑进行有效分离。从代码组织角度来看，应用主要分为以下几个核心部分：页面入口组件（KitchenTimer）、通用标题栏组件（CommonTitleBar）、圆环进度显示组件（Circle）、滑块时长设置组件（Slider）以及时间格式化工具方法（app_formatTime）。

在ArkUI框架中，每一个页面都是一个独立的@Component装饰器组件。KitchenTimer组件作为整个应用的根组件，负责管理所有的状态变量和业务逻辑，包括预设时长管理、剩余秒数计算、运行状态控制、进度百分比计算等。UI渲染通过build()方法中的声明式代码完成，所有UI更新都由状态变量变化自动触发。这种"状态驱动UI更新"的响应式编程范式是ArkTS最核心的设计理念。

┌─────────────────────────────────────────────────────────┐
│                    KitchenTimer页面                        │
│  ┌─────────────────────────────────────────────────┐    │
│  │              CommonTitleBar组件                  │    │
│  │              (导航栏+标题显示)                    │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              圆环进度显示区                      │    │
│  │              (Stack布局：底环+前景环+时间文本)     │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              时长设置区域                        │    │
│  │              (Slider滑块 + 文本提示)              │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              控制按钮区域                        │    │
│  │              (重置 + 开始/暂停)                   │    │
│  └─────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

2.2 模块依赖关系

从依赖关系的角度分析，厨房定时器应用主要依赖以下几个核心模块：

首先是CommonTitleBar组件，该组件提供了统一的页面标题栏和返回按钮功能。作为项目中的通用组件，CommonTitleBar被多个页面复用，避免了每个页面都重复实现导航栏的代码。CommonTitleBar组件接收两个参数：app_title用于设置页面标题，app_showBack用于控制返回按钮的显示隐藏。

其次是ArkUI框架内置的Circle组件，该组件提供了圆环（环形）绘制能力。在厨房定时器中，圆环用于直观展示剩余时间的进度百分比，圆形中心显示倒计时数字，形成了一个完整的视觉倒计时反馈系统。

Slider组件是ArkUI框架提供的滑块输入控件，用于设置定时器的预设时长。用户可以通过滑动滑块在1-60分钟范围内选择烹饪时长，滑块的实时数值变化会立即反映在时长提示文本中。

2.3 数据模型设计

厨房定时器应用的数据模型包含以下核心状态变量：

@State app_duration: number = 5;              // 预设时长（分钟）
@State app_remainingSeconds: number = 300;   // 剩余秒数
@State app_isRunning: boolean = false;        // 运行状态
@State app_progress: number = 100;            // 进度百分比（0-100）
状态变量 类型 初始值 说明
app_duration number 5 用户设置的预设时长（分钟），范围1-60
app_remainingSeconds number 300 倒计时剩余秒数，初始化为5分钟
app_isRunning boolean false 计时器运行状态，true=运行中，false=暂停
app_progress number 100 圆环进度百分比，100表示完整圆环，0表示空

这些状态变量之间存在关联关系：app_duration变化时，如果没有在运行，app_remainingSeconds应该同步更新；app_remainingSeconds变化时，app_progress需要重新计算；app_isRunning控制计时器的启动与暂停。

3. 核心代码详解

3.1 状态管理机制

厨房定时器应用的状态管理是其最核心的技术特征之一。在ArkTS框架中，@State装饰器是实现组件状态管理的基石。当@State修饰的变量发生变化时，HarmonyOS框架会自动触发UI的重新渲染，这种响应式更新机制使得开发者无需手动操作DOM或调用渲染函数，只需关注数据的变化即可。

@State app_duration: number = 5;
@State app_remainingSeconds: number = 300;
@State app_isRunning: boolean = false;
@State app_progress: number = 100;

ArkTS作为静态类型语言，要求所有变量必须显式声明类型。这里的类型声明（number、boolean）都是不可或缺的，这也是ArkTS与标准TypeScript的一个区别点——ArkTS不支持any和unknown类型，必须显式指定。

3.2 Stack布局容器使用

厨房定时器的圆环进度显示区域使用了Stack布局容器。Stack是一个层叠布局容器，允许子组件按照堆叠顺序依次排列，后添加的子组件会覆盖先添加的子组件。这对于实现圆环进度效果非常有用：底层放置灰色底环，中间放置根据进度变化的蓝色前景环，顶层放置倒计时数字文本。

Stack() {
  // 第一层：灰色背景圆环
  Circle()
    .width(200)
    .height(200)
    .stroke($r('app.color.app_color_border'))
    .strokeWidth(10)
    .fill($r('app.color.app_color_white'))

  // 第二层：蓝色前景圆环（根据进度填充）
  Circle()
    .width(200)
    .height(200)
    .stroke($r('app.color.app_color_primary'))
    .strokeWidth(10)
    .fillWidth(this.app_progress)

  // 第三层：倒计时文本（最上层显示）
  Text(this.app_formatTime(this.app_remainingSeconds))
    .fontSize(48)
    .fontWeight(FontWeight.Bold)
    .fontColor($r('app.color.app_color_text_primary'))
}
.width(300)
.height(300)

Stack布局的关键要点：

子组件顺序：Stack中子组件的添加顺序决定了它们的层叠关系。最先添加的组件在最底层，最后添加的组件在最顶层。在厨房定时器中，底环首先添加（最底层），前景环其次添加（覆盖底环），文本最后添加（覆盖在最上层）。

fillWidth属性：前景圆环使用fillWidth属性控制填充宽度，这是一个非常巧妙的实现。fillWidth的值范围是0到圆环宽度（200），当fillWidth为200时圆环完全填充，当fillWidth为0时圆环完全空白。通过绑定app_progress状态变量，圆环的填充程度随着倒计时进行而实时减少。

层叠效果：这种设计创造了一个"圆环进度条"的视觉效果。底环提供灰色背景，前景环提供蓝色进度，合在一起就是用户看到的"剩余进度圆环"。

3.3 Circle圆环组件详解

Circle组件是ArkUI框架提供的圆形绘制组件，其关键属性说明：

属性 类型 说明
width/height Length 圆形的宽高尺寸，设置相同值形成正圆
stroke ResourceColor 圆环的描边颜色
strokeWidth number 圆环的线宽（厚度）
fill ResourceColor 圆形的填充颜色
fillWidth number 圆环的填充宽度（0到width值）

在厨房定时器中，两个Circle组件的fillWidth属性实现了一个巧妙的视觉效果：

// 底环：灰色圆环，stroke绘制环形
Circle()
  .width(200)
  .height(200)
  .stroke('#E5E5E5')  // 灰色描边
  .strokeWidth(10)    // 10像素粗
  .fill('#FFFFFF')    // 白色填充（覆盖中心区域）

// 前景环：蓝色圆环，fillWidth实现进度填充
Circle()
  .width(200)
  .height(200)
  .stroke('#007DFF')  // 蓝色描边
  .strokeWidth(10)    // 10像素粗
  .fillWidth(this.app_progress)  // 动态填充宽度

前景环的fillWidth与app_progress绑定，当app_progress从100变化到0时，fillWidth从200变化到0，圆环从完全填充变成完全空白。这种设计省去了复杂的Canvas绑图代码，直接利用Circle组件的内置属性实现进度效果。

3.4 Slider组件使用

Slider组件是ArkUI框架提供的滑块输入控件，用于在指定范围内选择数值。在厨房定时器中，Slider用于设置预设时长（1-60分钟）。

Column({ space: 12 }) {
  Text(`设置时间: ${this.app_duration} 分钟`)
    .fontSize(16)
    .fontColor($r('app.color.app_color_text_secondary'))

  Slider({
    min: 1,
    max: 60,
    value: this.app_duration,
    step: 1
  })
    .width('80%')
    .onChange((app_value: number) => {
      this.app_duration = app_value;
      if (!this.app_isRunning) {
        this.app_remainingSeconds = app_value * 60;
      }
    })
}

Slider组件的关键配置参数说明：

参数 类型 说明
min number 滑块的最小值，此处为1分钟
max number 滑块的最大值，此处为60分钟
value number 滑块的当前值，绑定到app_duration
step number 滑块的步长，此处为1分钟
onChange (value: number) => void 滑块值变化时的回调函数

Slider的onChange回调在用户滑动滑块并确认选择时触发。回调参数app_value是新选择的数值。应用在回调中完成以下操作：

  1. 更新app_duration为新值
  2. 如果计时器未运行，同时更新app_remainingSeconds为新值对应的秒数

这种设计确保了用户设置时长的即时反馈——滑块位置变化时，下方的提示文本会同步更新。

3.5 时间格式化实现

厨房定时器使用app_formatTime方法将秒数格式化为"MM:SS"的显示格式，这是烹饪计时器的标准显示方式。

private app_formatTime(app_seconds: number): string {
  let app_mins: number = Math.floor(app_seconds / 60);
  let app_secs: number = app_seconds % 60;
  return `${app_mins.toString().padStart(2, '0')}:${app_secs.toString().padStart(2, '0')}`;
}

时间格式化的算法逻辑：

分钟计算：Math.floor(app_seconds / 60)将总秒数整除60，得到分钟数。例如300秒整除60得到5分钟。

秒数余数：app_seconds % 60计算总秒数除以60的余数，得到不足一分钟的秒数。例如300秒对60取余得到0，表示正好5分0秒。

补零处理：使用padStart(2, '0')方法确保分钟和秒数都至少显示两位数字。当数值小于10时，自动在前面补0。例如5分钟显示为"05"，5秒显示为"05"。

最终返回格式化的字符串如"05:00"、"12:45"等，符合用户对计时器的阅读习惯。

4. 控制逻辑实现

4.1 开始暂停功能

厨房定时器的"开始"和"暂停"功能通过app_isRunning状态变量控制：

Button(this.app_isRunning ? '暂停' : '开始')
  .type(ButtonType.Normal)
  .backgroundColor($r('app.color.app_color_primary'))
  .onClick(() => {
    this.app_isRunning = !this.app_isRunning;
  })

这个按钮的交互逻辑：

状态切换：点击按钮时，!this.app_isRunning取反操作切换运行状态。当app_isRunning为false时，点击后变为true（开始运行）；当为true时，点击后变为false（暂停）。

按钮文字：按钮文字根据app_isRunning的状态动态显示。"开始"表示当前处于暂停状态，"暂停"表示当前正在运行。

背景颜色：使用type(ButtonType.Normal)设置按钮为普通填充样式，backgroundColor使用主题色app_color_primary。

但需要指出的是，当前代码实现中，点击"开始/暂停"按钮只切换了app_isRunning状态，并没有真正驱动倒计时逻辑。真正的倒计时驱动需要定时器机制：

private app_timerId: number | null = null;

app_startTimer(): void {
  if (this.app_timerId !== null) {
    return;
  }
  this.app_timerId = setInterval(() => {
    if (this.app_isRunning && this.app_remainingSeconds > 0) {
      this.app_remainingSeconds--;
      this.app_progress = (this.app_remainingSeconds / (this.app_duration * 60)) * 100;
    }
  }, 1000);
}

app_stopTimer(): void {
  if (this.app_timerId !== null) {
    clearInterval(this.app_timerId);
    this.app_timerId = null;
  }
}

4.2 重置功能实现

"重置"按钮用于将计时器恢复到初始状态：

Button('重置')
  .onClick(() => {
    this.app_isRunning = false;
    this.app_remainingSeconds = this.app_duration * 60;
    this.app_progress = 100;
  })

重置操作包含三个步骤：

  1. 停止运行：设置app_isRunning为false，确保计时器处于暂停状态
  2. 恢复时长：将剩余秒数重置为当前预设时长对应的秒数（app_duration × 60）
  3. 恢复进度：将进度百分比重置为100（完整圆环）

重置操作在计时中途或计时结束时都可以使用，是用户重新开始计时的快捷操作。

4.3 边界情况处理

厨房定时器需要处理以下边界情况：

计时结束：当app_remainingSeconds减到0时，应该停止计时并给出提示。

if (this.app_remainingSeconds <= 0) {
  this.app_remainingSeconds = 0;
  this.app_progress = 0;
  this.app_isRunning = false;
  // 可以添加播放提示音或震动等反馈
}

进度百分比计算：进度计算公式为剩余秒数 / 总秒数 × 100。当剩余秒数为0时，进度为0；当剩余秒数等于总秒数时，进度为100。

滑动冲突：当Slider值变化时，如果计时器正在运行，应该如何处理？当前代码选择在运行时不更新剩余秒数，这可能不是最佳用户体验。更好的设计是：运行时调整时长从当前剩余时间开始新的计时，或者禁止在运行时调整时长并给出提示。

5. UI布局设计

5.1 整体布局结构

厨房定时器的UI布局采用垂直堆叠的Column容器组织各个功能区块，从上到下依次是标题栏、圆环显示区、时长设置区、控制按钮区。

build() {
  Column() {
    CommonTitleBar({
      app_title: '厨房定时器',
      app_showBack: true
    })

    Column({ space: 32 }) {
      // 圆环进度显示区
      Stack() {
        Circle() {...}  // 底环
        Circle() {...}  // 前景环
        Text() {...}    // 时间文本
      }

      // 时长设置区
      Column({ space: 12 }) {
        Text(`设置时间: ${this.app_duration} 分钟`)
        Slider({...})
      }

      // 控制按钮区
      Row({ space: 16 }) {
        Button('重置')
        Button('开始')
      }
    }
    .width('100%')
    .padding(16)
  }
  .width('100%')
  .height('100%')
  .backgroundColor($r('app.color.app_color_background'))
}

布局层次说明：

外层Column：整个页面的根容器，设置背景色和全屏宽高
中层Column（space: 32）：主内容区域，32vp间距垂直排列各个功能模块
内层Stack：圆环进度显示区域，使用层叠布局实现进度效果
内层Column：时长设置区域，包含文本和Slider两个子元素
内层Row：控制按钮区域，水平排列重置和开始按钮

5.2 圆环显示区设计

圆环显示区是厨房定时器的视觉焦点，使用Stack组件实现三层叠加效果：

Stack() {
  // 底层：灰色背景圆环（静态）
  Circle()
    .width(200)
    .height(200)
    .stroke($r('app.color.app_color_border'))
    .strokeWidth(10)
    .fill($r('app.color.app_color_white'))

  // 中层：蓝色进度圆环（动态）
  Circle()
    .width(200)
    .height(200)
    .stroke($r('app.color.app_color_primary'))
    .strokeWidth(10)
    .fillWidth(this.app_progress)

  // 顶层：倒计时文本
  Text(this.app_formatTime(this.app_remainingSeconds))
    .fontSize(48)
    .fontWeight(FontWeight.Bold)
    .fontColor($r('app.color.app_color_text_primary'))
}
.width(300)
.height(300)

圆环尺寸设计：圆环直径200vp，线宽10vp。这样的比例使得圆环看起来粗细适中，既不会显得单薄，也不会过于笨重。Stack容器的宽高设置为300vp，比圆环尺寸稍大，确保圆环完整显示且有适当的边距。

5.3 时长设置区设计

时长设置区使用Column容器组织文本提示和Slider滑块：

Column({ space: 12 }) {
  Text(`设置时间: ${this.app_duration} 分钟`)
    .fontSize(16)
    .fontColor($r('app.color.app_color_text_secondary'))

  Slider({
    min: 1,
    max: 60,
    value: this.app_duration,
    step: 1
  })
    .width('80%')
    .onChange((app_value: number) => {
      this.app_duration = app_value;
      if (!this.app_isRunning) {
        this.app_remainingSeconds = app_value * 60;
      }
    })
}
.padding(24)
.backgroundColor($r('app.color.app_color_white'))
.borderRadius(16)

设计要点：

间距控制：space: 12设置文本和Slider之间的间距为12vp
滑块宽度：width(‘80%’)使滑块占父容器宽度的80%，居中显示
容器样式：白色背景和圆角边框与圆环显示区保持一致的视觉风格

5.4 控制按钮区设计

控制按钮区使用Row容器水平排列两个按钮：

Row({ space: 16 }) {
  Button('重置')
    .onClick(() => {
      this.app_isRunning = false;
      this.app_remainingSeconds = this.app_duration * 60;
      this.app_progress = 100;
    })

  Button(this.app_isRunning ? '暂停' : '开始')
    .type(ButtonType.Normal)
    .backgroundColor($r('app.color.app_color_primary'))
    .onClick(() => {
      this.app_isRunning = !this.app_isRunning;
    })
}

设计要点：

按钮顺序：重置按钮在左，开始/暂停按钮在右。符合从左到右的操作习惯。

视觉区分：开始/暂停按钮使用主题色背景，重置按钮使用默认样式（灰色背景）。主题色按钮更醒目，引导用户点击。

状态反馈：开始/暂停按钮根据app_isRunning状态切换文字，实时反映计时器运行状态。

6. 样式与主题

6.1 颜色资源引用

厨房定时器应用大量使用了$r语法引用应用级颜色资源：

// 边框颜色（灰色）
.stroke($r('app.color.app_color_border'))
// 主题色（蓝色）
.stroke($r('app.color.app_color_primary'))
// 白色背景
.fill($r('app.color.app_color_white'))
.backgroundColor($r('app.color.app_color_white'))
// 文字颜色
.fontColor($r('app.color.app_color_text_primary'))
.fontColor($r('app.color.app_color_text_secondary'))
// 页面背景
.backgroundColor($r('app.color.app_color_background'))

颜色资源引用的优势：

统一管理：所有颜色定义集中存放在资源文件中，修改一处即可全局生效。

主题切换：如果应用支持多主题（浅色/深色），只需准备多套颜色资源文件。浅色主题的颜色资源放在resources/base/element/color.json，深色主题放在resources/dark/element/color.json。

代码清晰：使用语义化的颜色名称比直接使用色值更具可读性。

6.2 字体样式规范

厨房定时器应用使用了明确的字体层级设计：

元素 字号 字重 颜色
倒计时数字 48 Bold（粗体） app_color_text_primary
时长提示文本 16 Normal app_color_text_secondary

倒计时数字：使用最大字号（48）和粗体，确保用户在任何距离都能清晰看到剩余时间。

提示文本：使用较小字号（16）和次要颜色，不抢夺主信息的视觉焦点。

6.3 间距系统规范

厨房定时器的间距设计遵循ArkUI的最佳实践：

主内容间距：Column的space: 32用于设置各功能区块之间的间距
次要间距：Column的space: 12用于设置区块内部元素之间的间距
按钮间距：Row的space: 16用于设置按钮之间的间距

这种分层间距设计使得界面层次清晰，既有功能区块之间的大间隔，也有区块内部的小间隔。

7. 组件生命周期管理

7.1 aboutToAppear与aboutToDisappear

ArkUI组件提供了完整的生命周期回调，厨房定时器应该在这些回调中管理定时器资源。

aboutToAppear(): void {
  // 组件即将显示时调用
  // 初始化剩余秒数
  this.app_remainingSeconds = this.app_duration * 60;
  // 启动定时器
  this.app_startTimer();
}

aboutToDisappear(): void {
  // 组件即将销毁时调用
  // 停止定时器释放资源
  this.app_stopTimer();
}

7.2 定时器资源管理

定时器作为一种有限的系统资源，如果不正确管理，可能导致内存泄漏和性能问题。厨房定时器在定时器管理方面应该遵循最佳实践。

private app_timerId: number | null = null;

app_startTimer(): void {
  // 防止重复创建定时器
  if (this.app_timerId !== null) {
    return;
  }
  this.app_timerId = setInterval(() => {
    if (this.app_isRunning && this.app_remainingSeconds > 0) {
      this.app_remainingSeconds--;
      this.app_progress = (this.app_remainingSeconds / (this.app_duration * 60)) * 100;
    }
  }, 1000);
}

app_stopTimer(): void {
  if (this.app_timerId !== null) {
    clearInterval(this.app_timerId);
    this.app_timerId = null;
  }
}

定时器管理的最佳实践：

创建前检查：每次创建定时器前检查ID是否为null，只有为null时才创建。这防止了因重复调用startTimer而创建多个定时器的问题。

停止时重置：清除定时器后立即将ID设置为null，确保状态与实际资源一致。

生命周期配合：在组件销毁回调中必须停止定时器。如果不这样做，当用户通过导航返回上一页面时，定时器可能仍在后台运行。

8. 性能优化策略

8.1 渲染性能优化

厨房定时器在渲染优化方面采用了以下策略：

Circle组件fillWidth属性：使用Circle组件的内置fillWidth属性实现进度效果，而不是使用Canvas自定义绑图。相比Canvas，Circle组件由框架优化渲染，性能更好。

响应式更新机制：ArkUI框架会自动追踪@State变量的依赖关系，只有当变量值发生变化时才触发重渲染。如果更新前后的值相同，框架会智能地跳过不必要的渲染操作。

8.2 定时器性能优化

检查运行状态：定时器回调中首先检查app_isRunning状态，只有在运行时才执行倒计时逻辑。这种设计使得"暂停"状态的定时器回调几乎是空操作，开销极小。

提前退出：当剩余秒数已经为0时，不再执行递减操作，避免出现负数。

9. 扩展与展望

9.1 当前功能总结

厨房定时器应用实现了以下核心功能：

功能模块 实现描述
圆环进度显示 Stack布局三层叠加，Circle组件实现底环和前景环
时长设置 Slider滑块控制1-60分钟范围，实时反馈设置值
开始暂停 app_isRunning状态切换，按钮文字动态变化
重置功能 一键恢复初始状态，重新开始计时
时间格式化 毫米:秒秒格式显示，padStart补零处理

9.2 功能扩展方向

基于当前的厨房定时器应用架构，可以进行以下功能扩展：

多计时器支持：同时管理多个独立的计时器，用户可以同时进行多项烹饪任务。

预设快捷按钮：提供"5分钟"、“10分钟”、"15分钟"等快捷按钮，一键设置常用时长。

声音提醒：计时结束时播放提示音或震动，提醒用户食物已熟。可以通过@kit.MultimediaKit实现音频播放。

数据持久化：保存用户常用的时长设置，下次打开应用时自动恢复。

智能推荐：根据食物种类推荐烹饪时长，如"煮面3分钟"、"焖饭20分钟"等。

倒计时通知：通过@kit.NotificationKit发送系统通知，即使应用在后台也能收到提醒。

这些扩展方向不仅能增加应用的实用性，也能帮助开发者更深入地掌握HarmonyOS开发的各个方面。

10. 技术要点总结

10.1 ArkTS核心特性使用

通过厨房定时器应用，我们可以总结以下ArkTS核心特性的使用方法：

@State装饰器：用于声明组件级别的响应式状态。当状态变量发生变化时，框架自动触发UI重新渲染。

@State app_isRunning: boolean = false;

Stack布局容器：用于实现子组件的层叠排列。后添加的子组件覆盖先添加的子组件，适合实现进度条等效果。

Stack() {
  Circle()
  Circle()
  Text()
}

Slider组件：用于实现数值范围的滑块选择。min/max/step/onChange是其核心配置。

Slider({
  min: 1,
  max: 60,
  value: this.app_duration,
  step: 1
})

$r资源引用：引用资源文件中的定义，实现样式与代码的分离。

.fontColor($r('app.color.app_color_primary'))

10.2 Circle组件进阶用法

Circle组件不仅可以绘制静态圆形，还可以通过fillWidth属性实现动态进度效果：

// 完整圆环
Circle()
  .fillWidth(200)  // 等于width值，完全填充

// 半圆环
Circle()
  .fillWidth(100)  // 一半填充

// 空白圆环
Circle()
  .fillWidth(0)    // 完全空白

通过将fillWidth绑定到响应式状态变量，可以实现各种动态进度效果，而无需使用复杂的Canvas绑图。

10.3 计时器设计模式

ArkTS中实现计时器的标准模式：

private app_timerId: number | null = null;

aboutToAppear(): void {
  this.app_startTimer();
}

aboutToDisappear(): void {
  this.app_stopTimer();
}

app_startTimer(): void {
  if (this.app_timerId !== null) return;
  this.app_timerId = setInterval(() => {
    // 计时逻辑
  }, 1000);
}

app_stopTimer(): void {
  if (this.app_timerId !== null) {
    clearInterval(this.app_timerId);
    this.app_timerId = null;
  }
}

这种模式确保了定时器资源的正确获取和释放，避免了内存泄漏和资源浪费问题。

希望本文对厨房定时器应用的技术剖析能够帮助开发者深入理解HarmonyOS ArkTS的开发范式和核心API使用技巧，特别是Stack布局、Circle组件fillWidth属性、Slider滑块交互等实用技能。

# harmonyos # 华为 # 学习 # 鸿蒙 # 鸿蒙系统
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

ArkTS原生孕周计算器应用 - 基于胎儿发育展示的孕期管理助手

avatar HarmonyOS开发者社区
cover

Flutter 实战：hangman_game 猜词游戏的本地词库、字母键盘与鸿蒙适配解析

avatar HarmonyOS开发者社区
cover

Flutter 实战：random_team_generator 随机分队器的名单解析、均匀分配与鸿蒙适配解析

avatar HarmonyOS开发者社区