「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战:计数器应用

简介: 本篇将通过一个简单的计数器应用,带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理,帮助开发者熟悉基本的应用构建流程。

本篇将通过一个简单的计数器应用,带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理,帮助开发者熟悉基本的应用构建流程。

20241027_142524.gif20241027_142524.gif

关键词
  • 计数器应用
  • 组件操作
  • 事件响应
  • 状态管理
  • HarmonyOS 应用开发

一、创建计数器项目

1.1 在 DevEco Studio 中新建项目
  • 打开 DevEco Studio,选择 File > New > Create Project
  • 选择适合的模板,填写项目名称为 CounterApp,确认创建项目。项目结构文件将在 src/main/ets/pages/Index.ets 文件中生成。
1.2 设计 Index.ets 初始代码

Index.ets 文件中,实现简单的界面设计,包括标题、计数器数字显示和两个按钮(“加”和“减”):

// 入口组件定义,用于指定应用的启动页面
@Entry
@Component
struct Index {
   
  // 定义一个状态变量 count,用 @State 修饰符管理其状态变化
  @State count: number = 0;

  // build() 方法构建页面布局和组件
  build() {
   
    // 使用 Column 组件作为垂直布局容器
    Column() {
   
      // 应用标题文本
      Text('计数器应用')
        .fontSize(24) // 设置标题字体大小为 24
        .fontWeight(FontWeight.Bold) // 设置字体为粗体
        .margin({
    top: 20 }) // 顶部边距为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐

      // 显示当前计数值的文本组件
      Text(this.count.toString()) // 将 count 数值转换为字符串显示
        .fontSize(50) // 设置字体大小为 50
        .fontWeight(FontWeight.Bold) // 字体加粗
        .margin({
    top: 20, bottom: 20 }) // 上下边距分别为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐

      // 使用 Row 组件实现水平布局,包含“加”和“减”按钮
      Row() {
   
        // "加"按钮,点击后计数值增加
        Button('加') 
          .onClick(() => {
    // 添加点击事件处理函数
            this.count += 1; // 点击时,count 变量加 1
          })
          .fontSize(20) // 设置按钮字体大小为 20
          .width('40%') // 按钮宽度为容器的 40%
          .margin({
    right: 10 }) // 设置右边距为 10

        // "减"按钮,点击后计数值减少
        Button('减') 
          .onClick(() => {
    // 添加点击事件处理函数
            if (this.count > 0) {
    // 限制最小值为 0,避免负数
              this.count -= 1; // 点击时,count 变量减 1
            }
          })
          .fontSize(20) // 设置按钮字体大小为 20
          .width('40%') // 按钮宽度为容器的 40%
          .margin({
    left: 10 }) // 设置左边距为 10
      }
      .justifyContent(FlexAlign.Center) // 水平居中对齐 Row 中的按钮

      // 添加一个“重置”按钮,点击时重置 count 值为 0
      Button('重置') 
        .onClick(() => {
    // 添加点击事件处理函数
          this.count = 0; // 点击时,将 count 变量重置为 0
        })
        .fontSize(20) // 设置按钮字体大小为 20
        .width('100%') // 按钮宽度为容器的 100%
        .margin({
    top: 20 }) // 顶部边距为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐
    }
    .width('100%') // 设置 Column 容器宽度为 100%
    .height('100%') // 设置 Column 容器高度为 100%
    .padding(20) // 设置内边距为 20
  }
}
1.3 界面说明
  • count 是一个状态变量,显示当前的计数值。
  • 按钮通过 onClick 事件监听点击,分别控制计数器增减。
  • 使用 ColumnRow 组件布局,以保持界面居中和对齐。

二、运行计数器应用

2.1 选择运行设备
  • 在 DevEco Studio 中选择模拟器或连接真实设备。
  • 点击 Run 按钮,应用将在设备上启动,并显示计数器界面。
2.2 操作说明
  • 点击“加”按钮,计数器数值递增。
  • 点击“减”按钮,计数器数值递减。
  • 通过此交互体验,熟悉 @State 状态更新和界面实时刷新效果。

三、增强计数器功能

3.1 添加重置按钮

Row 组件下方,增加一个“重置”按钮,点击时将 count 重置为 0:

Button('重置')
  .onClick(() => {
   
    this.count = 0;
  })
  .fontSize(20)
  .width('100%')
  .margin({
    top: 20 })
  .alignSelf(ItemAlign.Center)
3.2 设置边界条件

count 设置上下限,计数器数值不能小于 0:

Button('减')
  .onClick(() => {
   
    if (this.count > 0) {
   
      this.count -= 1;
    }
  })
  .fontSize(20)
  .width('40%')
  .margin({
    left: 10 })
3.3 添加动态提示

在数值显示下方,增加一个文本提示,显示当前的计数状态:

Text(this.count > 10 ? '计数已达上限' : '')
  .fontSize(16)
  .fontColor(Color.Red)
  .alignSelf(ItemAlign.Center)
  .margin({
    top: 10 })

四、项目结构管理

4.1 创建单独的组件文件

将计数器代码从 Index.ets 文件中提取出来,创建 Counter.ets 文件,以便项目结构清晰,利于维护。

@Component
export struct CounterTest {
   
  @State count: number = 0

  build() {
   
    Column() {
   
      Text('计数器应用')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({
    top: 20 })
        .alignSelf(ItemAlign.Center)

      Text(this.count.toString())
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({
    top: 20, bottom: 20 })
        .alignSelf(ItemAlign.Center)

      Text(this.count > 10 ? '计数已达上限' : '')
        .fontSize(16)
        .fontColor(Color.Red)
        .alignSelf(ItemAlign.Center)
        .margin({
    top: 10 })

      Row() {
   
        Button('加')
          .onClick(() => {
    this.count += 1 })
          .fontSize(20)
          .width('40%')
          .margin({
    right: 10 })

        Button('减')
          .onClick(() => {
    if (this.count > 0) this.count -= 1 })
          .fontSize(20)
          .width('40%')
          .margin({
    left: 10 })
      }
      .justifyContent(FlexAlign.Center)

      Button('重置')
        .onClick(() => {
    this.count = 0 })
        .fontSize(20)
        .width('100%')
        .margin({
    top: 20 })
        .alignSelf(ItemAlign.Center)
    }
  }
}
4.2 在 Index.ets 文件中引用 Counter 组件
import {
    CounterTest } from './Counter'

@Entry
@Component
struct Index {
   
  build() {
   
    Column() {
   
      CounterTest()
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
4.3 代码模块化

通过模块化管理,项目结构更清晰,组件之间的耦合度更低,有助于后期维护和功能拓展。


五、常见开发问题与调试

  1. 状态更新不及时:确保使用 @State 修饰变量,避免状态更改后界面不刷新问题。
  2. 事件未响应:检查 onClick 回调函数是否在按钮组件中正确设置,确保事件能被正确触发。
  3. 布局异常:使用 ColumnRow 等布局组件时,注意 alignSelfjustifyContent 的使用,以保证界面元素正确对齐。

小结

本篇通过计数器项目演示了从界面设计、事件响应到状态管理的完整操作流程,帮助开发者熟悉鸿蒙开发的基础技能。通过组件化和模块化管理,项目结构更加清晰、扩展性更强,为后续开发打下了坚实的基础。


下一篇预告

下一篇将介绍鸿蒙UI组件的基础,带你深入了解 Text 和 Button 组件的详细用法。


上一篇:「Mac畅玩鸿蒙与硬件9」鸿蒙开发环境配置篇9 - 使用 Git 进行版本控制

下一篇:「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解


目录
相关文章
|
3天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
135 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
4天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
106 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
1天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
36 17
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
2天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
34 16
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
|
3天前
|
监控 开发工具 Android开发
ARMS 用户体验监控正式发布原生鸿蒙应用 SDK
阿里云 ARMS 用户体验监控(RUM)推出了针对原生鸿蒙应用的 SDK。SDK 使用 ArkTS 语言开发,支持页面采集、资源加载采集、异常采集及自定义采集等功能,能够全面监控鸿蒙应用的表现。集成简单,只需几步即可将 SDK 接入项目中,为鸿蒙应用的开发者提供了强有力的支持。
|
16天前
|
JavaScript 安全 前端开发
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
250 4
|
16天前
|
存储 数据安全/隐私保护
鸿蒙开发:自定义一个动态输入框
在鸿蒙开发中,如何实现这一效果呢,最重要的解决两个问题,第一个问题是,如何在上一个输入框输入完之后,焦点切换至下一个输入框中,第二个问题是,如何禁止已经输入的输入框的焦点,两个问题解决完之后,其他的就很是简单了。
43 13
鸿蒙开发:自定义一个动态输入框
|
19天前
|
小程序 测试技术 API
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
本文详细介绍元服务的开发及上架全流程,涵盖元服务的特点、创建项目、服务卡片、签名打包、开发测试及上架审核等环节,帮助开发者轻松掌握从零开始开发并发布元服务的全过程。元服务以其轻量、免安装、易于使用等特点,成为未来服务提供的重要形式。
51 13
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
|
24天前
|
Android开发
鸿蒙开发:自定义一个简单的标题栏
本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。
鸿蒙开发:自定义一个简单的标题栏
|
24天前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求

热门文章

最新文章