基于ArkTS语言的OpenHarmony APP应用开发:简易计数器 原创

福州市凌睿智捷电子有限公司
发布于 2024-9-14 13:44
浏览
0收藏

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})

实验显示如下所示:

基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区

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)

实验显示结果如下:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区
(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})

实验结果如下所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区
(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})

实验结果显示如下所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区

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)

实验结果显示如下所示:

基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区
(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%')
    }
}

实验结果显示如下所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区

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")
    }
  }
}

实验结果显示如下所示:

基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区

3、项目编译

打开边侧栏"Project"的工程,打开"entry/src/main/ets/MainAbility/pages/index.ets",具体如下所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区
编译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",出现简单计数器页面。如下图所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区
点击"+"按钮,可显示实验步骤。如下图所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区

4.2、远程模拟器

点击"Run"按键,将程序下载到开发板中,可从液晶屏看到程序结果。如下图所示:
基于ArkTS语言的OpenHarmony APP应用开发:简易计数器-鸿蒙开发者社区

5、其他问题

5.1、indext.ets

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报
回复
    相关推荐