ArkTS开发实践

目录

文章目录

前言

一、自定义组件的组成？

二、基本组件的属性和布局

总结

---

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

ArkTS是有ArkTSUI框架提供，用于以声明式开发界面的语言。其构建页面的过程，其实就是组合的过程主要体现在两个方面：

1. 描述UI的呈现效果，而不关心过程
2. 状态驱动视图更新

类似苹果的SwiftUI通过组合视图View 、安卓的JetPackCompose通过组合@Composable函数通过 组合自定义 组件完成页面的创建。     

                                                                       

一、自定义组件的组成？

ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器构成一个自定义组件。

使用@Entry和@Component的自定义组件作为页面的入口，会在页面加载时首先渲染。

@Entry
@Component
struct ToDoList {...}

在自定义组件内部需要使用build方法来进行UI 描述

@Entry
@Component
 struct ToDoList
   ...
   build() {
    ...
  } 
}

build方法内部可以容纳内置组件和 其他自定义组件，如Column、Row、Text等

@Entry
@Component
struct ToDoList {
  ...
  build() {
    Column(...) {
      Text(...)
        ...
      ForEach(...{
        TodoItem(...)
      },...)
    }
  ...
  }
}

​​​​​​​二、基本组件的属性和布局

ArkTS 提供了额属性方法用于描述界面的样式

• 常量传递例如使用fontSize(50)来配置字体大小。
  1. Text('Hello World')
  2. .fontSize(50)

• 变量传递在组件内定义了相应的变量后，例如组件内部成员变量size，就可以使用this.size方式使用该变量。
  1. Text('Hello World')
  2. .fontSize(this.size)

• 链式调用在配置多个属性时，ArkTS提供了链式调用的方式，通过'.'方式连续配置。
  1. Text('Hello World')
  2. .fontSize(this.size)
  3. .width(100)
  4. .height(100)
• 表达式传递属性中还可以传入普通表达式以及三目运算表达式。
  1. Text('Hello World')
  2. .fontSize(this.size)
  3. .width(this.count + 100)
  4. .height(this.count % 2 === 0 ? 100 : 200)
• 内置枚举类型除此之外，ArkTS中还提供了内置枚举类型，如Color，FontWeight等，例如设置fontColor改变字体颜色为红色，并私有fontWeight为加粗。
  1. Text('Hello World')
  2. .fontSize(this.size)
  3. .width(this.count + 100)
  4. .height(this.count % 2 === 0 ? 100 : 200)
  5. .fontColor(Color.Red)
  6. .fontWeight(FontWeight.Bold)

---

总结

今天就写这么写，其他组件用法改日在写