初识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)

      }

  }

}


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容