ArkTS项目中如何实现一个简单的书籍列表?

3,030 阅读2分钟

在实现一个书籍列表之前我们需要一步一步的去学习一下ArKTS的基础知识,在掌握了基础知识之后再去动手实现会事半功倍。

Snip20240731_5.png

1、 声明式描述

在实际开发中我们会在每一个后缀为.ets文件中去写一个名为build的函数,在这个函数中我们会通过描述UI组件呈现出对应的展示结果,这个就是声明式描述。下面我们从一段代码来理解一下:

Snip20240731_3.png

如上图所示,Text就是我们这里所描述的一个文本,而且它是横向排列的结果呈现出来。所以,这里也可以简单理解为:你看到的界面是什么样子的,在实际开发中的代码中就对应的进行什么样的描述,而过程交给框架去实现。

2、状态驱动视图更新

应用界面是动态的,需要根据不同的状态显示不同的内容。

  • 状态:驱动应用变化的数据源。
  • 视图:与状态相关的UI内容。

Snip20240728_3.png

3、自定义组件的声明

  • 自定义组件:通过组合基础组件,封装得到的可重用、可组合的UI单元。
  • 自定义组件需要使用@Component关键字来修饰。

4、布局

  • (1)、配置布局

多个组件的排列关系。如下图为:一个Row组件、Image组件以及Text组件组合实现一个类似于iOS中的列表cell的样式。

Snip20240731_7.png

  • (2)、容器组件

容器组件是用来描述多个组件间布局关系的组件。如下图所示container就是一个容器组件,而容器组件中包含的若干个其他组件会按照顺序排列来实现一个界面样式。

Snip20240731_6.png

5、组件状态的改变

以官网给的一个案例图为例进行说明,如下图所示,在实现列表的选中的非选中的状态时,需要使用@State修饰器,还需要结合一个isComplete的变量去分别控制用户选中与非选中两种状态的事件处理。

Snip20240728_14.png

6、实现分析

  • (1)、书籍列表界面的主界面采用Column列布局容器,其里边的组件会按照纵向的方式进行顺序排列。Text组件为展示书籍列表几个字的组件,ToDoItem为自定义组件。

Snip20240731_10.png

  • (2)、ToDoItem自定义组件包含:Row行排列容器,其里边又包含ImageText两个组件,

Snip20240731_9.png

  • (3)、假如我们的书籍列表起名为TodoList,那么整体的结构如下图所示,然后根据下图的结构写出对应的代码即可实现一个书籍列表界面。

Snip20240731_11.png

7、代码下载

代码