不再迷茫！ArkUI状态管理@State实操使用宝典，助你打造高效任务进度案例

2023-03-13 18:39:28

使用 ArkUI 的 @State、@Prop 和 @Link 管理组件状态

摘要

构建响应式且动态的 UI 界面对于任何移动应用都是至关重要的。ArkUI 提供了强大的状态管理工具，如 @State、@Prop 和 @Link，可帮助你轻松管理组件状态，提高开发效率。本文将深入探讨这些工具，并通过一个任务进度案例演示其使用方式。

@State 状态管理变量

@State 状态管理变量允许你管理组件的状态。当 @State 变量发生变化时，组件会自动重新渲染，从而实现响应式 UI 更新。例如：

@State
private String taskName;

@State
private boolean isCompleted;

任务进度案例

创建任务

@Component
public class TaskListComponent extends Component {

    @State
    private String taskName;

    // ...

    public void addTask() {
        Task task = new Task(taskName, false);
        taskList.add(task);
    }
}

显示任务列表

<ScrollView>
    {taskList.map((task) => {
        return (
            <ListItem
                key={task.id}
                title={task.name}
                subtitle={task.isCompleted ? "Completed" : "Not Completed"}
            />
        );
    })}
</ScrollView>

完成任务

@Component
public class TaskItemComponent extends Component {

    @Prop
    private Task task;

    // ...

    public void completeTask() {
        task.isCompleted = true;
    }
}

@Prop 和 @Link

@Prop

@Prop 装饰器允许你将父组件的状态传递给子组件，实现可重用的组件。例如：

@Component
public class TaskItemComponent extends Component {

    @Prop
    private Task task;

    // ...
}

@Link

@Link 装饰器允许你在父组件和子组件之间同步状态。当父组件状态发生变化时，子组件状态也会自动更新。例如：

@Component
public class TaskListComponent extends Component {

    @State
    private List<Task> taskList;

    // ...

    @Link(TaskItemComponent.class)
    private TaskItemComponent taskItem;
}

@Component
public class TaskItemComponent extends Component {

    @Prop
    private Task task;

    // ...

    @Link(TaskListComponent.class)
    private TaskListComponent taskList;
}