Kuikly 拥有两种开发模式选择：Kuikly Compose（支持标准 Jetpack Compose DSL）与 Kuikly 自研 DSL。两者在 Kuikly Core 跨端引擎上并行运行，业务方可根据场景灵活选择。

本文将详细解析这两种开发模式的核心特点、区别及上手指南。

---

第一部分：Kuikly Compose (Compose DSL)

Kuikly Compose 指的是在 Kuikly Core 跨端引擎上，支持标准的 Jetpack Compose DSL。它让开发者能用最熟悉的 Compose 语法开发跨平台应用，同时享受 Kuikly 的原生渲染能力。

1. 核心特点

• 更多平台支持：通过复用 Kuikly 的通用渲染层，无缝覆盖 Android、iOS、鸿蒙 (HarmonyOS)、H5 以及 微信小程序。相比官方 Compose Multiplatform，额外支持了小程序平台。
• 原生体验：不同于官方 Compose 的自渲染（Skia）方式，Kuikly Compose 保留了 Kuikly 的 原生渲染 优势，将 Compose 组件映射为原生 View，确保高性能和原生级交互体验。
• 动态化能力 (Beta)：天然具备 Kuikly 的动态化能力，支持热更新和动态下发。
• AI 友好：API 与官方 Compose 基本一致，可直接使用 Cursor、GitHub Copilot 等 AI 工具生成代码，无需额外适配。

2. Kuikly Compose vs 官方 Compose Multiplatform

特性	Kuikly Compose	Compose Multiplatform
跨平台支持	Android / iOS / 鸿蒙 / H5 / 微信小程序	Android / iOS / Desktop / H5
渲染方式	纯原生渲染 (Native Views)	Skia 自渲染 (Canvas)
性能	原生性能，内存占用较低	依赖 Skia，包体积较大
动态化	支持	不支持

3. 快速上手

创建Kuikly Compose工程

创建工程，并选择Kuikly project template （需要完成环境搭建中的ide插件安装）

在配置页面的 DSL 选项中选择 Compose。选择 Kuikly 创建的就是Kuikly DSL项目。

完成创建并执行 Gradle Sync。

创建一个 Compose 页面

Kuikly 中的页面一般继承自 ComposeContainer，并在 willInit 中通过 setContent 设置 Compose 内容。

package com.caojing.kuiklycompose

import androidx.compose.runtime.*
import com.tencent.kuikly.compose.ComposeContainer
import com.tencent.kuikly.compose.foundation.layout.Column
import com.tencent.kuikly.compose.material3.Button
import com.tencent.kuikly.compose.material3.Scaffold
import com.tencent.kuikly.compose.material3.Text
import com.tencent.kuikly.compose.setContent
import com.tencent.kuikly.compose.ui.Modifier
import com.tencent.kuikly.core.annotations.Page

@Page("HelloComposePage")
class HelloComposePage : ComposeContainer() {
    override fun willInit() {
        super.willInit()
        setContent {
            // 使用标准的 Compose Scaffold
            Scaffold(Modifier.margin(top = 40f)) {
                HelloPage()
            }
        }
    }

    @Composable
    fun HelloPage() {
        // 标准 Compose State
        var count by remember { mutableStateOf(0) }
        
        Column {
            Text("你好，Compose，点击次数:$count")
            Button(onClick = { count++ }) {
                Text("点击+1")
            }
        }
    }
}

1. 创建页面类

• • 继承 ComposeContainer
  • 使用 @Page 注解定义页面名称
  • 在 willInit() 中调用 setContent {} 设置 UI

1. 实现 Compose UI

• • 在 setContent 中使用 Compose DSL 编写 UI 代码
  • 可以使用标准的 Compose 组件和修饰符

1. 运行和测试

• • 使用 Android Studio 运行项目
  • 在模拟器或真机上查看效果

注意：

• 页面继承自Kuikly的 ComposeContainer 而非Android Activity。
• 生命周期和路由能力来自 Kuikly Core，与自研 DSL 页面保持一致。

---

第二部分：Kuikly DSL

除了支持标准 Compose DSL，Kuikly 原有的自研 DSL 依然是高性能开发的选项。它采用分离式的 attr/event 结构，更贴近底层渲染树。

1. 核心范式对比

在标准 Compose 中，我们使用 Modifier 链式调用；而在 Kuikly 自研 DSL 中，属性和事件被严格分离。

Compose 写法：

Text(
    text = "Hello",
    modifier = Modifier.padding(10.dp).clickable { }
)

Kuikly 自研 DSL 写法：

Text {
    // 1. 属性配置区 (样式、布局)
    attr {
        text("Hello")
        padding(10f) // 直接调用方法，无 Modifier
    }
    // 2. 事件回调区
    event {
        click { }
    }
}

2. 布局系统：Flexbox

自研 DSL 统一使用 Flexbox 布局模型，而非 Compose 的 Row/Column 组合。

Compose 概念	Kuikly 自研 DSL 实现 (attr 中)
Row	flexDirectionRow()
Column	flexDirectionColumn() (默认)
Box	positionAbsolute()
Modifier.weight(1f)	flex(1f)
Alignment.Center	allCenter()

实战示例 (左图右文)：

View {
    attr {
        flexDirectionRow() // 水平排列
        alignItemsCenter() // 垂直居中
        padding(16f)
    }
    Image {
        attr {
            size(50f, 50f)
            borderRadius(25f)
        }
    }
    Text {
        attr {
            text("用户名称")
            flex(1f) // 占满剩余空间
        }
    }
}

3. 状态管理

自研 DSL 使用 observable 委托来实现类似 State 的响应式更新。

@Page("CounterPage")
class CounterPage : Pager() {
    // 相当于 mutableStateOf
    private var count by observable(0)

    override fun body(): ViewBuilder {
        return {
            View {
                Text {
                    attr { text("计数: $ctx.count") } // 自动刷新
                    event {
                        click { ctx.count++ }
                    }
                }
            }
        }
    }
}

---

总结：如何选择？

维度	Kuikly Compose (推荐)	Kuikly 自研 DSL
上手门槛	低 (兼容标准 Compose 语法)	中 (需学习新 DSL 结构)
生态复用	可复用现有的 Compose 业务代码	需重写 UI
AI 辅助	完美支持 (Copilot 等)	支持一般
底层控制	封装层级较高	更接近底层，性能极致优化

建议：新项目或习惯 Compose 的团队优先选择 Kuikly Compose；对包体积和极致性能有极其严苛要求，或维护旧项目时，使用 自研 DSL。