HarmonyOS应用开发---ArkTS语言基础

栅格是多设备场景下通用的辅助定位工具，可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。推荐内容相同但布局不同时使用。

二，媒体查询（@ohos.mediaquery）

媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局。

三，列表（List）

使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本。

网格（Grid）

网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用，例如计算器、相册、日历等。

轮播（Swiper）

轮播组件通常用于实现广告轮播、图片预览等。

六，选项卡（Tabs）

选项卡可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

第二单元基础语法

样式图：

一，装饰器

用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

二，UI描述

以声明式的方式来描述UI的结构，例如build()方法中的代码块。

三，自定义组件

可复用的UI单元，可组合其他组件，如上述被@Component装饰的structHello。

系统组件

ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。

属性方法

组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。

事件方法：

组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

第三单元声明式UI描述

一．创建组件:

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。

说明:

创建组件时不需要new运算符。

无参数:

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

例如，Divider组件不包含构造参数。

代码：

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和Text组件的参数。

Image(this.imagePath)

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

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

二，配置属性

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

Text('test')

  .fontSize(12)

配置组件的多个属性。

Image('test.jpg')

  .alt('error.jpg')    

  .width(100)    

  .height(100)

除了直接传递常量参数外，还可以传递变量或表达式。（暂时不涉及）

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

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

Text('hello')

  .fontSize(20)

  .fontColor(Color.Red)

  .fontWeight(FontWeight.Bold)

三，配置事件

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

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

Button('Click me')

  .onClick(() => {

    this.myText = 'ArkUI';

  })

使用箭头函数表达式配置组件的事件方法，要求使用“() => {...}”，以确保函数与组件绑定，同时符合ArkTS语法规范。

Button('add counter')

  .onClick(() => {

    this.counter += 2;

  })

使用组件的成员函数配置组件的事件方法，需要bind this。ArkTS语法不推荐使用成员函数配合bind this去配置组件的事件方法。

myClickHandler(): void {

  this.counter += 2;

}

...

Button('add counter')

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

使用声明的箭头函数，可以直接调用，不需要bind this。

fn = () => {

  console.info(`counter: ${this.counter}`)

  this.counter++

}

...

Button('add counter')

  .onClick(this.fn)

四，配置子组件

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

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

Column() {

  Text('Hello')

    .fontSize(100)

  Divider()

  Text(this.myText)

    .fontSize(100)

    .fontColor(Color.Red)

}

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

Column() {

  Row() {

    Image('test1.jpg')

      .width(100)

      .height(100)

    Button('click +1')

      .onClick(() => {

        console.info('+1 clicked!');

      })

  }

}