前言：本文介绍如何基于KuiklyUI框架开发跨平台Todo应用

KuiklyUI框架在跨平台Todo应用中的作用：KuiklyUI是一个轻量级前端框架，专为快速构建跨平台应用设计。在开发Todo类应用时，其核心价值体现在跨平台兼容性，状态管理优化，性能优化特性，插件化扩展，开发效率提升。

KuiklyUI框架在跨平台Todo应用中的核心作用详解：

1、跨平台兼容性实现

• 基于React Native技术栈，支持iOS/Android/Web三端代码复用率高达90%
• 内置自适应布局系统，自动适配不同屏幕尺寸（从手机到平板）
• 示例：Todo列表在不同设备上保持一致的UI体验

2、状态管理优化方案

• 采用Redux精简版状态管理，特别优化了Todo应用常见的CRUD操作
• 支持本地存储同步，确保任务数据离线可用
• 典型场景：添加/完成/删除任务时的状态即时更新

3、性能优化特性

• 虚拟列表技术处理超长任务列表（1000+项仍保持流畅滚动）
• 动画优化：任务完成时的划除动画60fps稳定运行
• 内存管理：后台自动清理已完成任务的历史数据

4、插件化扩展体系

• 核心功能模块化：任务管理、分类系统、提醒功能均可独立扩展
• 官方插件市场提供日历集成、多设备同步等扩展功能
• 开发示例：通过安装提醒插件快速实现定时提醒功能

5、开发效率提升

• 预制Todo应用模板（包含基础CRUD功能）
• 热重载开发模式，修改代码实时预览效果
• CLI工具一键生成标准组件（如TaskItem、TaskList等）

特别优势：

• 构建基础版Todo应用仅需200KB包体积
• 开发周期相比原生开发缩短60%
• 支持渐进式增强，可从简单清单逐步升级为完整GTD系统

一、 配置鸿蒙 SDK 的环境变量

在系统变量中，输入变量名称及对应的SDK路径值（请根据您电脑上的实际SDK位置填写）。

变量名：DEVECO_SDK_HOME

变量值：C:\Users\hp\AppData\Local\Huawei\Sdk

二、开发Todo应用

1、从AtomGit或GitCode下载KuiklyTodo项目

1.1  访问AtomGit平台AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台，点击下载ZIP包获取项目压缩包

1.2  解压项目：将下载的压缩包解压到本地目录（建议解压路径不要包含中文或特殊字符）

1.3  在Android Studio中打开：

       选择"File" > "Open"，浏览到解压后的项目目录，点击"OK"打开项目，打开项目后，导航至以下路径：demo/src/commonMain/kotlin/com.tencent.kuikly.demo.pages/todo，检查该目录下应包含以下三个核心文件：TodoItem.kt、TodoPage.kt、TodoPageUI.kt

TodoItem.kt:

package com.tencent.kuikly.demo.pages.todo
data class TodoItem(
    val id: Long,
    var content: String,
    var isCompleted: Boolean = false
)

TodoPage.kt:

/**
 * @ProjectName : KuiklyUI
 * @Author : GuoJiaHui
 * @Time : 2026年01月29日 17:30 PM
 * @Description : 待办事项页面逻辑控制器
 * 负责管理待办事项列表的数据状态、增删改查操作
 */
package com.tencent.kuikly.demo.pages.todo

import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.demo.pages.base.BasePager
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.reactive.handler.observableList

/**
 * 待办事项页面类
 * 使用 @Page 注解标记为页面，路由名称为 "todo_page"
 */
@Page("todo_page")
internal class TodoPage : BasePager() {
    /** 待办事项列表数据，使用 observableList 实现响应式更新 */
    var todoList by observableList<TodoItem>()

    /** 输入框文本状态，使用 observable 实现双向绑定 */
    var inputText by observable("")

    /**
     * 页面创建生命周期回调
     * 在此初始化数据
     */
    override fun created() {
        super.created()
        // 初始化演示数据
        initData()
    }

    /**
     * 初始化演示数据
     * 添加默认的待办事项
     */
    private fun initData() {
        todoList.add(TodoItem(1, "学习 KuiklyUI 框架"))
        todoList.add(TodoItem(2, "创建一个 Todo 应用"))
    }

    /**
     * 构建页面 UI 结构
     * @return ViewBuilder UI 构建函数
     */
    override fun body(): ViewBuilder {
        return buildTodoUI(this)
    }

    /** 生成 ID 的计数器，起始值为 100 */
    private var nextId = 100L

    /**
     * 添加新的待办事项
     * 校验输入是否为空，创建新项并添加到列表，最后清空输入框
     */
    fun addTodo() {
        if (inputText.isBlank()) return
        val newItem = TodoItem(nextId++, inputText)
        todoList.add(newItem)
        inputText = ""
    }

    /**
     * 切换待办事项的完成状态
     * @param item 目标待办事项对象
     */
    fun toggleTodo(item: TodoItem) {
        item.isCompleted = !item.isCompleted
        // 触发列表更新：通过重新赋值触发 observableList 的更新机制
        val index = todoList.indexOf(item)
        if (index >= 0) {
            todoList[index] = item
        }
    }

    /**
     * 删除指定的待办事项
     * @param item 要删除的待办事项对象
     */
    fun deleteTodo(item: TodoItem) {
        todoList.remove(item)
    }

    /**
     * 清除所有已完成的待办事项
     * 遍历列表并移除 isCompleted 为 true 的项
     */
    fun clearCompleted() {
        todoList.removeAll { it.isCompleted }
    }
}

TodoPageUI.kt:

/**
 * @ProjectName : KuiklyUI
 * @Author : GuoJiaHui
 * @Time : 2026年01月29日 17:30 PM
 * @Description : 待办事项页面UI构建逻辑
 * 包含整体布局、样式定义及事件绑定
 */
package com.tencent.kuikly.demo.pages.todo

import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.views.*
import com.tencent.kuikly.core.directives.vfor
import com.tencent.kuikly.core.directives.vif
import com.tencent.kuikly.core.base.Border
import com.tencent.kuikly.core.base.BorderStyle
import com.tencent.kuikly.core.base.BoxShadow

/**
 * 构建 Todo 页面的 UI 结构
 * @param page 页面上下文对象，需转换为 TodoPage 类型以访问数据
 * @return ViewBuilder UI 构建闭包
 */
fun buildTodoUI(page: Pager): ViewBuilder {
    val ctx = page as TodoPage
    return {
        View {
            attr {
                // 设置页面主容器充满全屏
                flex(1f)
                backgroundColor(Color.WHITE)
                // 处理安全区域内边距，适配刘海屏/动态岛
                padding(
                    top = 16f + ctx.pageData.safeAreaInsets.top,
                    left = 16f + ctx.pageData.safeAreaInsets.left,
                    right = 16f + ctx.pageData.safeAreaInsets.right,
                    bottom = 16f + ctx.pageData.safeAreaInsets.bottom
                )
            }

            // 标题栏组件
            Text {
                attr {
                    text("待办事项清单")
                    fontSize(24f)
                    fontWeightBold()
                    marginBottom(20f)
                    color(Color.BLACK)
                }
            }

            // 顶部输入区域容器
            View {
                attr {
                    flexDirectionRow() // 水平布局
                    marginBottom(20f)
                    height(50f)
                    alignItemsCenter() // 垂直居中
                }

                // 文本输入框组件
                Input {
                    attr {
                        flex(1f) // 占据剩余宽度
                        text(ctx.inputText) // 绑定输入文本
                        placeholder("需要做什么？")
                        fontSize(16f)
                        backgroundColor(Color(0xFFF5F5F5))
                        borderRadius(8f)
                        height(44f)
                    }
                    event {
                        // 监听文本变化事件，更新数据模型
                        textDidChange { params ->
                            ctx.inputText = params.text
                        }
                    }
                }

                // 添加按钮组件
                View {
                    attr {
                        width(80f)
                        height(44f)
                        marginLeft(10f)
                        backgroundColor(Color(0xFF007AFF))
                        borderRadius(8f)
                        justifyContentCenter() // 内容居中
                        alignItemsCenter()
                        // 增加按钮投影效果
                        boxShadow(BoxShadow(0f, 2f, 4f, Color(0x40007AFF)))
                    }
                    Text {
                        attr {
                            text("添加")
                            color(Color.WHITE)
                            fontWeightBold()
                            fontSize(16f)
                        }
                    }
                    event {
                        // 绑定点击事件，调用添加逻辑
                        click { ctx.addTodo() }
                    }
                }
            }

            // 列表显示区域
            View {
                attr {
                    flex(1f) // 占据剩余空间
                }

                // 空状态提示：当列表为空时显示
                vif({ ctx.todoList.isEmpty() }) {
                    View {
                        attr {
                            flex(1f)
                            justifyContentCenter()
                            alignItemsCenter()
                        }
                        Text {
                            attr {
                                text("暂无待办事项")
                                fontSize(18f)
                                color(Color(0xFF999999))
                                marginBottom(8f)
                            }
                        }
                        Text {
                            attr {
                                text("快去添加一个吧！")
                                fontSize(14f)
                                color(Color(0xFFCCCCCC))
                            }
                        }
                    }
                }

                // 列表渲染循环：遍历 todoList 生成列表项
                vfor({ ctx.todoList }) { item ->
                    View {
                        attr {
                            flexDirectionColumn()
                        }

                        // 列表项内容行
                        View {
                            attr {
                                flexDirectionRow()
                                alignItemsCenter()
                                padding(top = 12f, bottom = 12f)
                            }

                            // 复选框组件（自定义 View 模拟）
                            View {
                                attr {
                                    width(24f)
                                    height(24f)
                                    borderRadius(12f)
                                    // 根据完成状态设置边框和背景色
                                    border(Border(2f, BorderStyle.SOLID, if (item.isCompleted) Color(0xFF007AFF) else Color(0xFFCCCCCC)))
                                    backgroundColor(if (item.isCompleted) Color(0xFF007AFF) else Color.TRANSPARENT)
                                    marginRight(12f)
                                    justifyContentCenter()
                                    alignItemsCenter()
                                }
                                event {
                                    // 点击复选框切换状态
                                    click { ctx.toggleTodo(item) }
                                }
                                // 勾选图标
                                Text {
                                    attr {
                                        text("✓")
                                        color(Color.WHITE)
                                        fontSize(14f)
                                        fontWeightBold()
                                        // 控制勾选标记的透明度
                                        opacity(if (item.isCompleted) 1f else 0f)
                                    }
                                }
                            }

                            // 待办事项文本内容
                            Text {
                                attr {
                                    text(item.content)
                                    fontSize(16f)
                                    // 完成状态文字颜色变浅
                                    color(if (item.isCompleted) Color(0xFF999999) else Color(0xFF333333))
                                    flex(1f)
                                    // 完成状态添加删除线
                                    if (item.isCompleted) textDecorationLineThrough() else "textDecoration" with "none"
                                }
                                event {
                                    // 点击文字也可切换状态
                                    click { ctx.toggleTodo(item) }
                                }
                            }

                            // 删除按钮
                            View {
                                attr {
                                    padding(8f) // 增加点击热区
                                }
                                event {
                                    click { ctx.deleteTodo(item) }
                                }
                                Text {
                                    attr {
                                        text("✕")
                                        color(Color(0xFFFF3B30)) // 红色警示色
                                        fontSize(18f)
                                    }
                                }
                            }
                        }

                        // 分割线
                        View {
                            attr {
                                height(1f)
                                backgroundColor(Color(0xFFEEEEEE))
                                marginLeft(36f) // 缩进以对齐文本
                            }
                        }
                    }
                }
            }

            // 底部状态栏与操作区（仅当列表不为空时显示）
            vif({ ctx.todoList.isNotEmpty() }) {
                View {
                    attr {
                        flexDirectionColumn()
                    }

                    // 顶部分割线
                    View {
                        attr {
                            height(1f)
                            backgroundColor(Color(0xFFEEEEEE))
                        }
                    }

                    // 底部内容容器
                    View {
                        attr {
                            flexDirectionRow()
                            justifyContentSpaceBetween() // 两端对齐
                            alignItemsCenter()
                            padding(top = 16f)
                        }

                        // 剩余待办计数
                        Text {
                            attr {
                                text("${ctx.todoList.count { !it.isCompleted }} 项待办")
                                fontSize(14f)
                                color(Color(0xFF666666))
                            }
                        }

                        // 清除已完成按钮
                        View {
                            attr {
                                padding(8f)
                            }
                            event {
                                click { ctx.clearCompleted() }
                            }
                            Text {
                                attr {
                                    text("清除已完成")
                                    fontSize(14f)
                                    color(Color(0xFF007AFF))
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

三、跨端运行Todo

在 Android Studio 中运行此项目时，先构建项目，然后点击运行按钮。

此时，从 Kuikly 项目到跨平台运行 Todo 应用的所有步骤已顺利完成。

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区