[文章]基于ArkTS语言的OpenHarmony APP应用开发：简易计数器

1、程序简介

该程序是基于OpenHarmony标准系统编写的UI应用类：Sample Counter（简单计数器）。

该程序设计1个按钮和显示框。当每次按下按钮，则显示框数字累加1。

本案例是基于API 9接口开发。

本案例已在OpenHarmony凌蒙派-RK3568开发板验证通过，具体代码可参考：https://gitee.com/Lockzhiner-Electronics/lockzhiner-rk3568-openharmony/tree/master/samples/d02_SampleCounter

2、知识准备

2.1、@Entry

@Entry修饰符表示一个页面的入口，它需要在config.json配置才可以显示。

2.2、@Component

@Component修饰符表示Index是一个组件。

2.3、@State

@State修饰符表示一个状态标识符，当它修饰的变量值改变时ArkUI开发框架会调用 build() 方法进行页面的刷新。

2.4、Text控件

Text表示一个文本控件。

2.4.1、Text定义介绍

interface TextInterface {
  (content?: string | Resource): TextAttribute;
}

content：要显示的文本内容，一个简单的例子如下：

Text("Hello, OpenHarmony")
​
Text('Hello, OpenHarmony')
  .width('100%')
  .textAlign(TextAlign.Center)
​
Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
  .maxLines(1)
  .textOverflow({overflow: TextOverflow.Ellipsis})

实验显示如下所示：

2.4.2、Text属性介绍

declare class TextAttribute extends CommonMethod<TextAttribute> {
  fontColor(value: ResourceColor): TextAttribute;
  fontSize(value: number | string | Resource): TextAttribute;
  minFontSize(value: number | string | Resource): TextAttribute;
  maxFontSize(value: number | string | Resource): TextAttribute;
  fontStyle(value: FontStyle): TextAttribute;
  fontWeight(value: number | FontWeight | string): TextAttribute;
  textAlign(value: TextAlign): TextAttribute;
  lineHeight(value: number | string | Resource): TextAttribute;
  textOverflow(value: { overflow: TextOverflow }): TextAttribute;
  fontFamily(value: string | Resource): TextAttribute;
  maxLines(value: number): TextAttribute;
  decoration(value: { type: TextDecorationType; color?: ResourceColor }): TextAttribute;
  letterSpacing(value: number | string): TextAttribute;
  textCase(value: TextCase): TextAttribute;
  baselineOffset(value: number | string): TextAttribute;
}

（1）textAlign：设置文本的对其方式，对齐参考系是 Text 组件本身，只有 Text 组件本身的宽度大于文本内容长度， textAlign 属性才起作用， TextAlign 定义了以下 3 种类型：

• Start（默认值）：根据文字书写相同的方向对齐，比如中文从左往右排版，那么文本则靠左对齐。
• Center：文本居中对齐。
• End：根据文字书写相反的方向对齐，比如中文从左往右排版，那么文本则靠右对齐。

简单样例如下所示：

Text("Hello, OpenHarmony")
  .backgroundColor('#aabbcc')
  .textAlign(TextAlign.Center) // 宽度等于文本内容长度，textAlign不起作用
​
Text('Hello, OpenHarmony')
  .backgroundColor('#ccaabb')
  .margin({top: 2})
  .width(200)                  // 宽度大于文本内容长度，textAlign起作用
  .textAlign(TextAlign.End)
​
Text('Hello, OpenHarmony')
  .backgroundColor('#bbccaa')
  .margin({top: 2})
  .width('100%')               // 宽度大于文本内容长度，textAlign起作用
  .textAlign(TextAlign.Center)

实验显示结果如下：

（2）maxLines、textOverflow：**设置文本显示的最大行数和截取方式，默认折行显示不截取，如果设置了此参数，则文本最多显示到指定的行，如果有多余的文本，可以通过 textOverflow 来指定截取方式，本样例的截断方式是 Ellipsis ，它将截断后的文本用 "..." 表示。

Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
  .margin({top: 5})
  .maxLines(1)
  .textOverflow({overflow: TextOverflow.Ellipsis})

实验结果如下所示：

（3）fontSize、fontColor、fontStyle、 fontWeight：分别表示设置文字的大小，颜色，样式以及粗细，我们可以组合起来设置文本的富样式，先看一个样例：

Text('Hello, OpenHarmony')
​
Text('Hello, OpenHarmony')
  .fontSize(20)
  .fontColor('#ff0000')
  .fontWeight(FontWeight.Bold)
  .fontStyle(FontStyle.Italic)
  .decoration({type: TextDecorationType.Underline, color: Color.Black})

实验结果显示如下所示：

2.5、Button控件

2.5.1、Button定义介绍

Button 组件也是基础组件之一，和其它基础组件不同的是 Button 组件允许添加一个子组件来实现不同的展示样式。

interface ButtonInterface {
  (): ButtonAttribute;
  (options: ButtonOptions): ButtonAttribute;
  (label: ResourceStr, options?: ButtonOptions): ButtonAttribute;
}

（1）label：设置按钮文字，简单样例如下所示：

Button('test')
​
Button('test')
  .backgroundColor(Color.Pink)

实验结果显示如下所示：

（2）type：设置 Button 按钮的显示样式， ButtonType 定义了以下3种样式：

• Capsule（默认值）：胶囊类型，圆角值为 Button 高度的一半并且不允许修改。
• Normal：矩形按钮，无圆角，可以通过 borderRadius 设置圆角大小。
• Circle：圆形按钮，设置该样式时，需要设置 Button 的宽高，否则不显示。

实验里如下所示：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        // 按钮设置为胶囊形状
        Button('test')
          .height(40)
          .width(90)
          .backgroundColor('#aabbcc')
​
        Button('test', { type: ButtonType.Capsule })
          .height(40)
          .width(90)
          .borderRadius(20) // 设置圆角，但是没有效果
          .borderWidth(3) // 设置边框宽度
          .borderColor(Color.Red) // 设置边框颜色
          .backgroundColor('#bbaacc') // 设置背景色
      }
      .width('100%')
      .height('10%')
​
      // 按钮设置为矩形形状
      Row() {
        Button('Login') // 默认胶囊类型
          .height(40)
          .width(90)
          .backgroundColor('#aabbcc')
​
        Button('Login', { type: ButtonType.Normal }) // 没有圆角
          .height(40)
          .width(90)
          .backgroundColor('#aabbcc')
​
        Button('Login', { type: ButtonType.Normal }) // 设置圆角
          .height(40)
          .width(90)
          .backgroundColor('#aabbcc')
          .borderRadius(8)
      }
      .width('100%')
      .height('10%')
​
      // 按钮设置为圆形形状
      Row() {
        Button('Login')
          .height(40)
          .width(90)
          .backgroundColor('#aabbcc')
​
        Button('Harmony', {type: ButtonType.Circle}) // Button没有设置宽高，则不显示
          .backgroundColor('#aabbcc')
​
        Button('OpenHarmony', {type: ButtonType.Circle})
          .height(40)
          .width(90)
          .backgroundColor('#aabbcc')
      }
      .width('100%')
      .height('10%')
​
      Row() {
        Button('effect: on')
          .fontSize(10)
        Button('effect: off', {stateEffect: false})
          .fontSize(10)
      }
      .width('100%')
      .height('10%')
    }
    .width('100%')
    .height('100%')
    }
}

实验结果显示如下所示：

2.5.2、Button属性介绍

（1）Button自定义样式

• 包含 Text 组件：样例给 Button 添加了一个 Text 子组件，通过设置 Text 的文本样式达到修改 Button 文字的效果。
• 包含Image组件：后续在详细讲解。
• 包含复杂组件：后续在详细讲解。

举一个例子，如下所示：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Button({ type: ButtonType.Normal }) {
        Text('Login')
          .fontSize(20)
          .fontColor(Color.Red)
          .padding({ left: 20, right: 20 })
      }
      .borderRadius(8)
      .backgroundColor("#aabbcc")
​
      Button({ type: ButtonType.Circle }) {
        Text('Login')
          .fontSize(20)
          .fontColor(Color.Red)
      }
      .width(80)
      .height(80)
      .backgroundColor("#aabbcc")
    }
  }
}

实验结果显示如下所示：

3、项目编译

打开边侧栏"Project"的工程，打开"entry/src/main/ets/MainAbility/pages/index.ets"，具体如下所示：

编译index.ets文件，源代码编辑如下所示：

@Entry
@Component
struct Index {
  @State count: number = 0;     // 计数变量
​
  build() {
    Stack({alignContent: Alignment.BottomEnd}) {  // 堆叠式布局
      Text(this.count.toString())                 // 一个文本控件，为了显示计数变量
        .fontSize(50)                             // 文字大小
        .margin(50)                               // 外边距
        .size({width: '100%', height: '100%'})    // 空间大小
​
      Button('+')                                 // 按键控件，文本为'+'
        .size({width: 80, height: 80})            // 按钮大小
        .fontSize(50)                             // 按钮文字大小
        .onClick(() => {                          // 按键点击事件
          this.count++;                           // count累加，触发build()方法回调
        })
        .margin(50)
    }
    .width('100%')
    .height('100%')
  }
}

4、运行结果

4.1、本地模拟器

点击右侧栏中的"Previewer"，出现简单计数器页面。如下图所示：

点击"+"按钮，可显示实验步骤。如下图所示：

4.2、远程模拟器

点击"Run"按键，将程序下载到开发板中，可从液晶屏看到程序结果。如下图所示：

5、其他问题

5.1、indext.ets

本目录下的index.ets是本章节需要修改的源代码文件，存放于工程目录下：entry/src/main/ets/MainAbility/pages/index.ets