从零教一个新手使用鸿蒙开发一个简单的计数应用-优快云博客

本文链接：https://blog.youkuaiyun.com/zwDeity/article/details/144850529

鸿蒙开发入门：构建一个简单的计数器应用

引言

鸿蒙操作系统（HarmonyOS）是华为推出的一款面向全场景的分布式操作系统，旨在为不同设备提供一致的开发体验。本文将通过构建一个简单的计数器应用，帮助你快速入门鸿蒙开发。我们将使用ArkTS（Ark TypeScript）作为开发语言，并结合实际代码案例进行详细说明。

环境准备

在开始之前，请确保你已经安装了DevEco Studio，这是华为提供的鸿蒙开发工具。你可以从华为开发者官网下载并安装最新版本的DevEco Studio。

创建项目

打开DevEco Studio，点击“Create HarmonyOS Project”。
选择“Empty Ability”，然后点击“Next”。
输入项目名称（例如：CounterApp），选择项目保存路径，然后点击“Finish”。

编写代码

在项目中，找到entry/src/main/ets/pages目录下的Index.ets文件，并用以下代码替换其内容：

@Entry
@Component
struct CounterApp {
  @State count: number = 0;

  build() {
    Column() {
      Text('计数器')
        .fontSize(36)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 40 })
        .textColor('#333333')

      Text(`${this.count}`)
        .fontSize(60)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
        .textColor('#007DFF')

      Row() {
        Button('+')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .width(80)
          .height(80)
          .backgroundColor('#007DFF')
          .textColor('#FFFFFF')
          .borderRadius(40)
          .onClick(() => {
            this.count++;
          })
          .margin({ right: 20 })

        Button('-')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .width(80)
          .height(80)
          .backgroundColor('#FF4D4F')
          .textColor('#FFFFFF')
          .borderRadius(40)
          .onClick(() => {
            this.count--;
          })
      }
      .margin({ top: 40 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#f1f1f1')
  }
}

代码解释

@Entry 和 @Component:
- @Entry 表示这是一个入口组件。
- @Component 表示这是一个组件。
@State:
- @State 用于定义组件的状态变量。在这个例子中，count 是一个状态变量，用于存储计数器的值。
build 方法:
- build 方法用于定义组件的UI结构。
- Column 用于垂直排列子组件。
- Text 用于显示文本。
- Row 用于水平排列子组件。
- Button 用于创建按钮。
- onClick 用于定义按钮点击事件的处理函数。
样式设置:
- fontSize 用于设置文本的字体大小。
- fontWeight 用于设置文本的字体粗细。
- margin 用于设置组件的外边距。
- justifyContent 和 alignItems 用于设置子组件的对齐方式。
- backgroundColor 用于设置背景颜色。
- textColor 用于设置文本颜色。
- width 和 height 用于设置组件的宽度和高度。
- borderRadius 用于设置组件的圆角半径。