Implementing a TodoList Component with ArkTS Declarative UI and State Management

Preface: Responding to readers' requests, this article continues the previous introduction of ArkTS declarative UI development paradigm and state management, and demonstrates these features by building a TodoList component.

Implementing a Todo List

We start with a ToDoItem custom component to illustrate the concepts required for a custom component.

UI:

Basic Concepts

@Entry and @Component: decorators for a struct. @Entry marks the page entry, @Component indicates a component. When both are present, the component becomes the entry component and is rendered on page load.

@Preview: decorator for a struct that enables real‑time preview of the custom component in DevEco Studio.

struct: custom components are implemented as structs without inheritance; instantiation can omit the new keyword.

The component’s UI is described inside a build method.

Text is a built‑in text component.

Property Configuration

Component properties are set with property methods (e.g., width() , height() , backgroundColor() ) chained by the “.” operator.

Custom Component

Having created ToDoItem, we now define the ToDoList component.

Adding a Column

Inside the custom component we use the Column layout to arrange content vertically with a spacing of 16.

Adding a Title

We then add a title to the list.

Adding Styles

The title receives styling.

List Rendering

We define a todo list and render items using a ForEach loop, passing each item to the ToDoItem component.

Data Display

The ToDoItem component receives the content from its parent using curly‑brace syntax.

At this point the UI of the TodoList is complete.

Responsive Events

To make each ToDoItem interactive, we add an isComplete state and an onClick handler. Clicking the item toggles isComplete , which automatically updates the UI thanks to the declarative model.

Finally, the full interactive effect of the TodoList is shown.

Thus we have built a simple TodoList component that demonstrates ArkTS’s declarative UI paradigm and state‑driven view updates.

Declarative UI Philosophy

Declarative UI focuses on two aspects: describing the desired UI result without detailing the rendering process, and letting state changes drive view updates.

Describe UI outcome, not the process.

State drives view updates.

This is illustrated in the TodoList: clicking a ToDoItem changes the isComplete state, and the UI automatically reflects the new state.

Reference: ArkTS Declarative UI Development Guide.