Harmony OS-4.0应用开发（第三章第二部分）

最新推荐文章于 2024-05-06 17:30:24 发布

金色的果实

最新推荐文章于 2024-05-06 17:30:24 发布

阅读量1k

点赞数 25

文章标签： harmonyos

本文链接：https://blog.csdn.net/l10711097061/article/details/137957588

版权

3.2初识ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

当前，ArkTS在TS的基础上主要扩展了如下能力：

基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

3.3ArkTS基本语法

3.3.1基本语法概述

在初步了解了ArkTS语言之后，我们以一个具体的示例来说明ArkTS的基本组成。该案例中当开发者点击按钮时，文本内容从“Hello World”变为“Hello ArkUI”,创建步骤如下。

1 打开 DevEvo Studio开发工具，新建项目

项目创建完成，进入该项目等待项目初始化完成即可：

2 在Index.ets中写入如下代码

@Entry
@Component
struct Hello {
  @State myText: string = 'World'

  build() {
    Column(){
      Text(`Hello ${this.myText}`)
        .fontSize(50)
      Divider()
      Button('Click me')
        .onClick(()=>{
          this.myText='ArkUI'
        })
        .height(50)
        .width(100)
        .margin({top:20})
    }
  }
}

对以上代码详细解释如下：

//@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
@Entry
/**
* @Component是一种装饰器，代表自定义组件，用@Component 装饰的 struct Hello 代表一个自定义的结构体，名字是Hello，是可重用的UI单元，可以与其他组件组合。
*/
@Component
struct Hello {
  //@State 是一种装饰器，被它装饰的变量 myText 值发生改变时，会触发该变量所对应的自定义组件 Hello 的 UI 界面进行自动刷新。
  @State myText: string = 'World'

  //build 方法中的代码块表示UI描述，以声明式的方式描述UI结构。
  build() {
    //Column 是内置组件，表示设置一列
    Column(){
      //设置文本及内容
      Text(`Hello ${this.myText}`)
        .fontSize(50)//设置文本大小
      Divider() //Divider 提供分隔器组件，分隔不同内容块/内容元素。
      //设置按钮
      Button('Click me')
        //设置按钮点击事件，点击按钮时将 myText 由 World 改变成 ArkUI
        .onClick(()=>{
          this.myText='ArkUI'
        })
        .height(50) //设置按钮高度
        .width(100) //设置按钮宽度
        .margin({top:20}) //设置按钮外边距
    }
  }
}

3 打开预览，验证组件功能

当点击“Click me”按钮时，“Hello World”变换成“Hello ArkUI”。

在以上示例中，ArkTS的基本组成如下所示。

装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。除此之外，ArkTS扩展了多种语法范式来使开发更加便捷：

@Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
@Extend/@Style：扩展内置组件和封装属性样式，更灵活地组合内置组件。
stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

3.3.2声明式UI概述

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。

3.3.2.1创建组件

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。创建组件时不需要new运算符。

无参数

如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，Divider组件不包含构造参数：

Column() {

Text('item 1')

Divider()

Text('item 2')

}

示例演示：

@Entry
@Component
struct UITest {
  build() {
    Column() {
      Text('item 1')
      Divider()
      Text('item 2')
    }
  }

预览如下：

有参数

如果组件的接口定义包含构造参数，则在组件后面的“()”配置相应参数。

Image组件的必选参数src。

Image('https://xyz/test.jpg')

Text组件的非必选参数content。

// string类型的参数

Text('test')

// $r形式引入应用资源，可应用于多语言场景

Text($r('app.string.title_value'))

// 无参数形式

Text()

变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。

Image(this.imagePath)

Image('https://' + this.imageUrl)

Text(`count: ${this.count}`)

示例演示：

@Entry
@Component
struct UITest {
  build() {
    Column() {
      Image('https://img0.baidu.com/it/u=110176915,621401482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=665')
        .height(500)
      Text('美女')
    }
  }
}

预览如下：

3.3.2.2配置属性

属性方法以“.”链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行。

Text('test')

.fontSize(12)

配置组件的多个属性。

Image('test.jpg')

  .alt('error.jpg')

  .width(100)

  .height(100)

除了直接传递常量参数外，还可以传递变量或表达式。

Text('hello')

  .fontSize(this.size)

Image('test.jpg')

  .width(this.count % 2 === 0 ? 100 : 200)

  .height(this.offset + 100)

对于系统组件，ArkUI还为其属性预定义了一些枚举类型供开发者调用，枚举类型可以作为参数传递，但必须满足参数类型要求。

例如，可以按以下方式配置Text组件的颜色和字体样式。

Text('hello')

  .fontSize(20)

  .fontColor(Color.Red)

  .fontWeight(FontWeight.Bold)

示例：

@Entry
@Component
struct UITest {
  textSize: number = 50;
  count:number = 2;
  imageOffset:number = 700;

  build() {
    Column(){
      Text("Hello ArkTS")
        .fontSize(this.textSize)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)

      Image('https://img0.baidu.com/it/u=110176915,621401482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=665')
        .width(this.count%2 === 0?500:200)
        .height(this.imageOffset + 100)
    }

  }
}

3.3.2.3配置事件

事件方法以“.”链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

使用箭头函数配置组件的事件方法。

Button('Click me')

  .onClick(() => {

    this.myText = 'ArkUI';

  })

使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件。

Button('add counter')

  .onClick(function(){

    this.counter += 2;

  }.bind(this))

使用组件的成员函数配置组件的事件方法。

myClickHandler(): void {

this.counter += 2;

}

...

Button('add counter')

.onClick(this.myClickHandler.bind(this))

示例：

预览如下：

@Entry
@Component
struct UITest {
  @State textSize: number = 20;

  myClickHandler(): void {
    this.textSize += 10;
  }

  build() {
    Column() {
      Text("Hello ArkTS")
        .fontSize(this.textSize)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)
      Divider()
      Button("增大字体")
        .height(50)
        .width(100)
        .margin(20)
        .onClick(this.myClickHandler.bind(this))
    }
  }
}

预览如下，每次点击“增大字体”按钮后，“Hello ArkTS”都会变大。

3.3.2.4配置子组件

如果组件支持子组件配置，则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。

以下是简单的Column组件配置子组件的示例。

Column() {

  Text('Hello')

    .fontSize(100)

  Divider()

  Text(this.myText)

    .fontSize(100)

    .fontColor(Color.Red)

}

容器组件均支持子组件配置，可以实现相对复杂的多级嵌套。

Column() {

  Text('Hello')

    .fontSize(100)

  Divider()

  Text(this.myText)

    .fontSize(100)

    .fontColor(Color.Red)

}

3.3.3基础组件-Text

Text组件是可以显示一段文本的组件。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中使用。

3.3.3.1用法

该组件使用方式如下：

Text(content?: string | Resource)

以上参数解释如下:

参数名

参数类型

必填

参数描述

content

string | Resource

否

文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。

默认值：' '

Text组件支持很多通用属性，如：width、height等，还支持如下属性：

名称	参数类型	描述
textAlign	TextAlign	设置文本段落在水平方向的对齐方式默认值：TextAlign.Start 说明：文本段落宽度占满Text组件宽度。可通过align属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部。Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中。Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。从API version 9开始，该接口支持在ArkTS卡片中使用。
textOverflow	{overflow: TextOverflow}	设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip} 说明：文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。需配合maxLines使用，单独设置不生效。从API version 9开始，该接口支持在ArkTS卡片中使用。
maxLines	number	设置文本的最大行数。默认值：Infinity 说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。从API version 9开始，该接口支持在ArkTS卡片中使用。
lineHeight	string \| number \| Resource	设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。从API version 9开始，该接口支持在ArkTS卡片中使用。
decoration	{ type: TextDecorationType, color?: ResourceColor }	设置文本装饰线样式及其颜色。默认值：{ type: TextDecorationType.None, color：Color.Black } 从API version 9开始，该接口支持在ArkTS卡片中使用。
baselineOffset	number \| string	设置文本基线的偏移量，默认值0。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置该值为百分比时，按默认值显示。
letterSpacing	number \| string	设置文本字符间距。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置该值为百分比时，按默认值显示。
minFontSize	number \| string \| Resource	设置文本最小显示字号。需配合maxFontSize以及maxline或布局大小限制使用，单独设置不生效。从API version 9开始，该接口支持在ArkTS卡片中使用。
maxFontSize	number \| string \| Resource	设置文本最大显示字号。需配合minFontSize以及maxline或布局大小限制使用，单独设置不生效。从API version 9开始，该接口支持在ArkTS卡片中使用。
textCase	TextCase	设置文本大小写。默认值：TextCase.Normal 从API version 9开始，该接口支持在ArkTS卡片中使用。
copyOption9+	CopyOptions	组件支持设置文本是否可复制粘贴。默认值：CopyOptions.None 该接口支持在ArkTS卡片中使用。说明：设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。

3.3.3.2示例

以下代码定义了一个名为 TextExample1 的组件，用于展示不同文本样式的效果，包括文本对齐、文本溢出处理和行高设置。

@Entry // 使用 @Entry 装饰器标识这是一个入口组件。
@Component // 使用 @Component 装饰器定义一个新组件。
struct TextExample1 { // 定义名为 TextExample1 的结构体，代表这个组件。

  build() { // 定义 build 方法来构建UI。
    Flex({ // 创建一个弹性布局容器。
      direction: FlexDirection.Column, // 设置布局方向为垂直列。
      alignItems: ItemAlign.Start, // 设置子项沿主轴的起始位置对齐。
      justifyContent: FlexAlign.SpaceBetween // 设置子项间距均匀分布。
    }) {
      // 文本水平方向对齐方式设置
      // 单行文本
      Text('textAlign').fontSize(9).fontColor(0xCCCCCC) // 创建一个文本组件，说明接下来的文本对齐设置。

      Text('TextAlign set to Center.') // 创建一个文本组件，文本居中对齐。
        .textAlign(TextAlign.Center) // 设置文本对齐方式为居中。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .width('100%') // 设置宽度为100%。

      Text('TextAlign set to Start.') // 创建一个文本组件，文本起始对齐。
        .textAlign(TextAlign.Start) // 设置文本对齐方式为起始对齐。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .width('100%') // 设置宽度为100%。

      Text('TextAlign set to End.') // 创建一个文本组件，文本结束对齐。
        .textAlign(TextAlign.End) // 设置文本对齐方式为结束对齐。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .width('100%') // 设置宽度为100%。

      // 多行文本
      Text('This is the text content with textAlign set to Center.') // 创建一个多行文本组件，文本居中对齐。
        .textAlign(TextAlign.Center) // 设置文本对齐方式为居中。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .width('100%') // 设置宽度为100%。

      Text('This is the text content with textAlign set to Start.') // 创建一个多行文本组件，文本起始对齐。
        .textAlign(TextAlign.Start) // 设置文本对齐方式为起始对齐。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .width('100%') // 设置宽度为100%。

      Text('This is the text content with textAlign set to End.') // 创建一个多行文本组件，文本结束对齐。
        .textAlign(TextAlign.End) // 设置文本对齐方式为结束对齐。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .width('100%') // 设置宽度为100%。

      // 文本超长时显示方式
      Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC) // 创建一个文本组件，说明接下来的文本溢出设置。

      // 超出maxLines截断内容展示
      Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
        .textOverflow({ overflow: TextOverflow.Clip }) // 设置文本溢出方式为剪裁（Clip）。
        .maxLines(1) // 设置最大行数为1。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。

      // 超出maxLines展示省略号
      Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
        .join('\u200B'))
        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 设置文本溢出方式为省略号（Ellipsis）。
        .maxLines(1) // 设置最大行数为1。
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。

      Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) // 创建一个文本组件，说明接下来的行高设置。

      // 设置文本的行高
      Text('This is the text with the line height set. This is the text with the line height set.')
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
      Text('This is the text with the line height set. This is the text with the line height set.')
        .fontSize(12) // 设置字体大小为12。
        .border({ width: 1 }) // 设置边框宽度为1。
        .padding(10) // 设置内边距为10。
        .lineHeight(20) // 设置行高为20。
    }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) // 设置容器的高度、宽度和内边距。
  }
}