基于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