ArkTS 快速入门

最新推荐文章于 2025-05-29 09:27:28 发布

步步生花@苏殿主

最新推荐文章于 2025-05-29 09:27:28 发布

阅读量1.5k

点赞数 21

CC 4.0 BY-SA版权

分类专栏：鸿蒙开发文章标签： ArkTs

本文链接：https://blog.csdn.net/sjp991012/article/details/136212593

本文介绍了如何使用ArkTS进行声明式UI开发，包括定义界面状态、描述显示效果、改变状态以及组件化编程。此外，还详细讲解了组件的语法、自定义组件、渲染控制技巧，如条件渲染和循环渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尚硅谷视频学习笔记

Typescript语法的基础可查看文章《ts快速入门》

ArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。

一、声明式UI

声明式UI是一种编写用户界面的范式。

下面通过一个具体案例来学习这种开发范式。

1、定义界面状态

按照声明式UI的开发范式，首先需要分析和定义页面的各种状态，并声明相应的状态变量用于表示不同的状态。

当前案例中，界面共有两个状态，分别是开灯和关灯状态，所以我们可以使用一个boolean类型的变量来表示这两个状态，true表示开灯，false表示关灯。如下：

@State isOn: boolean = false;

2、描述界面显示效果

在分析完界面状态后，我们需要准确的描述界面在不同状态下的显示效果。

在当前案例中，具体逻辑如下图所示

在这里插入图片描述

3、改变状态

在明确了界面在不同状态下的显示效果后，我们只需修改状态变量的值，就能触发界面的更新。

在当前案例中，若我们将isOn的值改为true，那么界面上就会显示开灯的图片，否则就会显示关灯的图片。

为了实现点击按钮开/关灯的效果，我们可以为按钮绑定点击事件：

当用户点击开灯按钮时，我们就将isOn的值改为true。
当用于点击关灯按钮时，我们就将isOn的值改为false。

在这里插入图片描述

4、总结

以上就是声明式UI开发范式的大致流程，下面总结一下声明式UI的核心思想：

声明式描述 ：开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。
状态数据驱动界面更新：开发者只需修改状态变量的值，界面就会自动更新。

二、组件化

在鸿蒙开发中，组件是构成界面的最小单元，我们所看到的界面，都是由众多组件组合而成的，所以编写界面其实就是组合组件的过程。

ArkTS提供了很多的内置组件，例如：Text、Button、Image等等；并且ArkTS还支持自定义组件，让开发者可根据具体需求自定义组件中的内容。

三、入门案例

效果图

在这里插入图片描述

完整代码

@Entry
@Component
struct LightPage {
   
   
  @State isOn: boolean = false;

  build() {
   
   
    Column({
   
    space: 20 }) {
   
   
      if (this.isOn) {
   
   
        Image('pages/helloworld/light/practice/images/img_light.png')
          .height(300)
          .width(300)
      } else {
   
   
        Image('pages/helloworld/light/practice/images/img_dark.png')
          .height(300)
          .width(300)
      }

      Row() {
   
   
        Button('关灯')
          .onClick(() => {
   
   
            this.isOn = false;
          })
        Button('开灯')
          .onClick(() => {
   
   
            this