第 7 章 · 跨端架构原理 — KMP + 两棵树 + Bridge

KMP 工程的源码集（SourceSet）结构

shared/
└── src/
    ├── commonMain/         ← 跨端共享代码（90%）
    │   └── kotlin/
    │       └── 你写的 Pager / 业务逻辑 / 数据模型
    │
    ├── androidMain/        ← Android 平台特有
    │   └── 调 android.* 的代码（actual 实现）
    │
    ├── iosMain/            ← iOS 平台特有
    │   └── 调 platform.UIKit.* 的代码
    │
    ├── ohosArm64Main/      ← HarmonyOS 平台特有
    │
    ├── jsMain/             ← Web / 小程序平台特有
    │
    └── commonTest/         ← 跨端测试

expect / actual：跨端 API 标准范式

当某个 API 必须各端不同实现时，用 expect 在 commonMain 声明，各 platformMain 用 actual 实现。

// commonMain/PlatformInfo.kt
expect fun currentPlatform(): String

// androidMain/PlatformInfo.kt
actual fun currentPlatform(): String =
    "Android ${Build.VERSION.RELEASE}"

// iosMain/PlatformInfo.kt
actual fun currentPlatform(): String =
    "iOS ${UIDevice.currentDevice.systemVersion}"

// jsMain/PlatformInfo.kt
actual fun currentPlatform(): String =
    "Web ${window.navigator.userAgent}"

业务侧调用方式跟普通函数一样：

// 业务代码（commonMain）
val plat = currentPlatform()
println("Hello from $plat")

// Android 跑：Hello from Android 14
// iOS 跑：Hello from iOS 17.0
// Web 跑：Hello from Web Mozilla/5.0...

KSP：编译期魔法

// 你写的：
@Page("HomePage")
class HomePage : Pager() { ... }

@Page("DetailPage")
class DetailPage : Pager() { ... }

// KSP 编译期生成（你看不到，但确实存在）：
object KuiklyCoreEntry {
    fun triggerRegisterPages() {
        PagerRegistry.register("HomePage") { HomePage() }
        PagerRegistry.register("DetailPage") { DetailPage() }
    }
}

两棵树架构 · BuildTree vs RenderTree

同一份 DSL，两棵树长不一样：

View {
    attr { allCenter() }
    Text { attr { text("A") } }
    if (showB) Text { attr { text("B") } }
    vfor({ list }) { Text { ... } }
}

Diff 在 RenderTree 上做

每个 RenderTree 节点都跟一个原生 View 1:1 对应。Diff 算法只关心"渲染相关"的变化，效率更高。

跟 RN/Vue 对比：精细化更新 vs 整树重渲染

渲染指令 · 跨端通用语言

所有 UI 操作 → 6 类核心指令 → 通过 Bridge 下发到各端原生层

实时演示：DSL → 指令

下面的 DSL 转成的指令序列：

View {
    attr { backgroundColor(Color.WHITE); size(100f, 50f) }
    Text { attr { text("Hello") } }
}

Bridge：跨语言通信桥

每个平台 Bridge 实现不同，但接口语义统一：

「按钮点击 → 屏幕更新」完整链路

★ 整个过程在一帧 16ms 内完成。Android 端因为是 JVM 直接调用，几乎零桥接开销。

跟 Flutter / RN 架构对比