初识ArkTS（HarmonyOS学习第二课）

ArkTS

---

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

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

基本语法:ArkTS,定义了声明式U描述、自定义组件和动态扩展 UI 元素的能力,再配合AKUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI 开发的主体。

状态管理:ArkTS 提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动

渲染控制:ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

ArkTS基本语法

---

基本语法概述

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

首先我们新创建一个项目MyApp02

在index.js文件当中

入口就是一打开App所看见的页面

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 所有带@符号的都属于装饰器
//
// Index是我们自定义的组件名称
//
// message: string 是定义的一个变量
//
// @State 装饰器 表示他是一个状态变量 （好处可以当变量的值发生变化的时候，变量所对应的组件页面会自动进行刷新）对应的Index组件
//
// build() 以声明式的的方式来描述UI结构
//
// Row()内置组件 代表一行
//
// Column()内置组件  表示一列
//
// Text(this.message)：所要展示的值
//
// .fontSize(50) 显示的字体大小 单位是像素
//
// fontWeight 表示显示的字体
//
// width('100%') 表示Column() 这一列的宽占页面的100%
//
// height('100%')   表示build() 这一行的高 占页面100%

实现一个简单点击按钮切换切换内容：

@Entry
@Component
struct Hello {
  @State pweaon_name: string = '张三'

  build() {
    Row() {
      Column() {
        Text(`Hello ${this.pweaon_name} !`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider() //Divider() 提供分隔器的组件（系统组件）
        Button('点击')
          .onClick(() => { //点击箭头函数
            this.pweaon_name = "李四" //点击一下给他重新赋值 然后因为@State监听pweaon_name所以会自动进行刷新
          })
          .height(50) //高
          .width(100) //宽
          .margin({ top: 20 }) //
      }
    }
  }
}

使用模拟器进行运行之后：

基本内容

---

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

• UI 描述:以声明式的方式来描述 UI的结构，例如 build()方法中的代码块。←自定义组件:可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。

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

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

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

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

• @Builder/@BuilderParam:特殊的封装UI描述的方法，细粒度的封装和复用UI描述。

• @Extend/@style:扩展内置组件和封装属性样式，更灵活地组合内置组件。

• “statestyles:多态样式，可以依据组件的内部状态的不同，设置不同样式。

声明式UI概述

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

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

Column() //无参数代码块
Text('item') //文本框的组件
Divider()//分割线的组件

@Entry //装饰器
@Component   //自定义一个组件
struct  UIText1{   //写组件内容

   build(){//相当于一个组件小集合
      Column(){
        Text("Hello text1")  //文本组件
        Divider() //分割线组件
        Text("Hello text2")
      }
   }
}

编写完成之后

可以在右边查看效果

接下来我们练习一下有图片的样式

//有图片和文本的样式

@Entry //装饰器
@Component   //自定义一个组件
struct  UIText1{   //写组件内容

   textValue= 'hello'
   textSize: number =50   //定义变量  字体大小
   imageHeight = 800    // 图片高度
   imageWidth =500      //图片宽度

   build(){//相当于一个组件小集合
      Column(){
         Text(this.textValue)//文本组件
            .fontSize(this.textSize)   //文本显示出来的字体大小
            .fontColor(Color.Green)    //文本显示的颜色
            .fontWeight(FontWeight.Bold) //文本显示字体类型（粗体）
         Image('http://easyimg.zhouchenji.com/i/2024/03/19/xltk19.jpg') //图片组件
            //设置图片样式
            .width(this.imageWidth)
            .height(this.imageHeight)
      }
   }
}