#跟着坚果学鸿蒙#
在鸿蒙仓颉中，和ArkTs一样，都是使用了声明式UI语法，声明式UI的特征有两个：声明式描述和状态驱动视图更新，在开发的过程中，我们并不是直接对UI直接进行操作，而是通过该表状态数据间接触发UI的变化。

什么是声明式描述？

以待办列表为例子，一个待办表项包含一个勾选框和一个文本，那用声明式描述就是描述一个勾选框和一个文本横向排列的结果。具体实现代码如下：

Row() {
    Checkbox()
    Text("待办项")
}

状态驱动视图更新

在我们应用开发中，应用的界面是动态的，需要根据不同的状态数据来更新界面。比如，当我们点击一个待办项时，我们需要将该待办项的状态设置为已完成，那么我们就需要更新界面，将该待办项的勾选框设置为已勾选。具体实现代码如下：

@State var isChecked: Bool = false // 定义状态变量
Row() {
    Checkbox().select(isChecked)
    Text('学习仓颉')
        .decoration(
            decorationType: if (isChecked) {
                TextDecorationType.LineThrough
            } else {
                TextDecorationType.None
            },
            color: Color.GRAY
        )
}.onClick {
    e => isChecked = !isChecked
}

以上代码中，我们定义了一个状态变量isChecked，当我们点击待办项时，我们将isChecked设置为!isChecked，这样就可以实现待办项的勾选状态的切换，通过isChecked的状态变化驱动视图的更新。

使用组件声明UI

在鸿蒙仓颉中，我们可以使用组件来声明UI，组件是一种可复用的UI组件，我们可以通过组件来声明UI，组件的使用方式如下：

@Component
class TodoItem {
    @Prop var isChecked: Boolean = false
    @Prop var text: String = ""

    func build() {
        Row() {
            Checkbox().select(isChecked)
            Text('学习仓颉')
            .decoration(
                decorationType: if (isChecked) {
                    TextDecorationType.LineThrough
                } else {
                    TextDecorationType.None
                },
                color: Color.GRAY
            )
            }.onClick {
                e => isChecked = !isChecked
        }
    }
}

以上代码中，我们使用Row组件来声明一个横向排列的UI，Row组件中包含一个Checkbox组件和一个Text组件，这样就可以实现一个待办项的UI。

使用组件声明UI

在鸿蒙仓颉中，我们可以使用组件来声明UI，组件是一种可复用的UI组件，我们可以通过组件来声明UI，组件的使用方式如下：

@Entry
@Component
class TodoList {
    @State var todoList: ArrayList<Todo> = ArrayList<Todo>()

    func build() {
        Column() {
            ForEach(
                todoList,
                itemGeneratorFunc: {
                    item: Todo, idx: Int64 => TodoItem(isChecked: item.isCheck, text: item.text)
                }
            )
        }
    }
}

通过以上代码，我们可以实现一个待办列表的UI。