第三讲_ArkTS的初识

发布时间:2024年01月18日

1. ArkTS的基本组成

在这里插入图片描述

  • 装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。
  • 自定义组件:可复用的UI单元,可组合其他组件,图示中@Component装饰的struct Hello就是一个自定义组件。
  • UI描述:以声明式的方式来描述UI的结构,图示中build()方法中的代码块。
  • 系统组件:ArkUI框架中内置的容器组件和基础组件,开发者可直接使用。图示中的ColumnTextDividerButton都是系统组件。
  • 属性方法:组件可以通过链式调用配置多项属性,图示中的fontSize()width()height()等。
  • 事件方法:组件可以通过链式调用设置多个事件的响应逻辑,图示中Button后面的onClick()就是给按钮设置点击事件。

2. ArkTS自定义组件

  1. 打开DevEco Studio新建一个ets文件,ArkTS File 的后缀名就是ets

在这里插入图片描述

  1. 编写自定义组件
    一个组件的基本结构:
    • @Component标记为一个组件
    • struct 定义组件结构
    • FirstComponent组件名
    • build():描绘组件UI
@Component
struct FirstComponent {
  build() {

  }
}
  1. 描绘组件UI
    添加一个系统组件Text(),它用来显示文本的,然后给文本字体设置大小。
@Component
struct FirstComponent {
  build() {
    Text("我是第一个组件")
      .fontSize(30)
  }
}
  1. 预览组件
    在DevEco Studio的Previewer中,只能预览被@Entry修饰的组件。所以这里先给组件加上@Entry修饰符,然后点开Previewer页签,进行组件的效果预览。
@Entry
@Component
struct FirstComponent {
  build() {
    Text("我是第一个组件")
      .fontSize(30)
  }
}

在这里插入图片描述

文章来源:https://blog.csdn.net/wenqi1992/article/details/135666524
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。