KMP的底层原理
1.总体流程
从底层架构详细解释 Compose Multiplatform (KMP) 在 Android 平台的 UI 渲染原理。
graph TD
A[Compose Multiplatform] --> B[Common UI Logic]
B --> D[Compose UI]
D --> E[Compose Runtime]
E --> F[Skia Engine]
F --> G1[Android Graphics]
F --> G2[iOS Graphics]
F --> G3[Desktop Graphics]
style A fill:#f96
style B fill:#aaf
style D fill:#fcc
style E fill:#cfc
style F fill:#ccf
详细解释
- 最顶层：Compose Multiplatform
// 跨平台的UI定义
@Composable
fun App() {
// 共享的UI逻辑
}
- Common UI Logic（共享UI逻辑层）
// 平台无关的UI组件和逻辑
@Composable
fun CommonButton(
onClick: () -> Unit,
text: String
) {
// 通用按钮实现
}
- Compose UI（UI渲染层）
// Compose的核心渲染逻辑
internal class ComposeUI {
fun render() {
// 将UI转换为渲染命令
}
}
- Compose Runtime（运行时层）
// Compose的运行时系统
internal class ComposeRuntime {
fun executeRenderCommands() {
// 处理渲染命令
// 转换为Skia绘制指令
}
}
- Skia Engine（图形引擎层）
// Skia绘制引擎
internal class SkiaEngine {
fun draw() {
// 统一的绘制API
// 处理所有平台的图形渲染
}
}
渲染流程
- UI定义阶段
Compose代码 -> UI树结构
- 布局计算阶段
UI树 -> 布局信息 -> 位置和尺寸
- 渲染命令转换
布局信息 -> Skia绘制命令
- 最终渲染
Skia命令 -> 平台图形API -> 屏幕显示
关键点解释
- 统一渲染引擎
Skia是Google开发的2D图形库
所有平台共用同一个Skia引擎
确保跨平台渲染的一致性
- 平台适配层
Skia -> Android Graphics (使用Android的Surface)
Skia -> iOS Graphics (使用Metal或OpenGL)
Skia -> Desktop Graphics (使用OpenGL或Direct3D)
- 性能优化
Skia提供硬件加速
平台特定的优化
统一的缓存机制
所以，正确的理解是：
- Compose的UI定义是统一的
- 通过Compose Runtime转换为Skia命令
- Skia作为统一的渲染引擎
- Skia再调用各平台的图形API进行最终渲染
这样可以：
- 保证跨平台的渲染一致性
- 充分利用Skia的性能优化
- 简化平台适配的复杂度
2. 核心层级结构
// 1. 声明式UI层
@Composable
fun MyUI() {
Column {
Text("Hello")
Button(onClick = {}) {
Text("Click")
}
}
}
// 2. 布局层
internal fun measureAndLayout() {
// Compose的测量和布局算法
}
// 3. 渲染层
internal fun render() {
// Skia绘制指令
}
渲染流程解释：
1. 组件树构建阶段：
- Compose函数执行，创建组件树
- 每个@Composable函数创建一个组件节点
- 建立组件间的父子关系
2. 布局阶段：
- 自上而下传递约束
- 自下而上返回尺寸
- 确定每个组件的位置和大小
3. 绘制阶段：
- 创建绘制命令
- 转换为Skia指令
- 最终渲染到屏幕
3. 渲染管线
graph LR
A[Compose UI] --> B[Layout]
B --> C[Drawing]
C --> D[Skia]
D --> E[Platform Graphics]
具体实现：
// 1. 组件树构建
class ComposeNode {
var layoutNode: LayoutNode? = null
var drawNode: DrawNode? = null
fun createLayout() {
// 创建布局节点
}
fun createDrawing() {
// 创建绘制节点
}
}
// 2. 布局计算
class LayoutNode {
fun measure(constraints: Constraints): MeasureResult {
// 测量布局
return MeasureResult(width, height)
}
fun place(position: IntOffset) {
// 放置组件
}
}
// 3. 绘制操作
class DrawNode {
fun draw(canvas: Canvas) {
// 使用Skia进行绘制
}
}
布局过程解释：
1. 测量过程（Measurement）：
- 父节点向子节点传递约束条件
- 子节点根据约束计算自己的尺寸
- 返回测量结果给父节点
2. 布局过程（Layout）：
- 从根节点开始确定位置
- 递归确定子节点位置
- 处理对齐和间距
4. Skia 渲染引擎集成
// 1. Skia Canvas 包装
internal class SkiaCanvas(private val nativeCanvas: Long) {
fun drawRect(rect: Rect, paint: Paint) {
nativeDrawRect(nativeCanvas, rect, paint)
}
private external fun nativeDrawRect(
nativeCanvas: Long,
rect: Rect,
paint: Paint
)
}
// 2. 渲染管道
class RenderPipeline {
fun render(root: ComposeNode) {
// 1. 创建Skia画布
val canvas = createSkiaCanvas()
// 2. 执行绘制
root.draw(canvas)
// 3. 提交绘制命令
canvas.flush()
}
}
Skia集成解释：
1. Skia初始化：
- 加载平台相关的Skia库
- 创建渲染上下文
- 配置渲染参数
2. 渲染过程：
- 将Compose绘制命令转换为Skia命令
- 使用Skia的硬件加速能力
- 处理图层合成
5. 平台特定实现
// Android平台实现
actual class PlatformCanvas {
private val androidCanvas: android.graphics.Canvas
actual fun drawLine(start: Point, end: Point, paint: Paint) {
androidCanvas.drawLine(
start.x,
start.y,
end.x,
end.y,
paint.toAndroidPaint()
)
}
}
// iOS平台实现
actual class PlatformCanvas {
private val cgContext: CGContext
actual fun drawLine(start: Point, end: Point, paint: Paint) {
cgContext.drawLine(
from: start.toCGPoint(),
to: end.toCGPoint(),
paint: paint.toCGColor()
)
}
}
状态管理解释：
1. 状态存储：
- 使用不可变状态模型
- 支持状态快照
- 实现状态回溯
2. 更新机制：
- 采用单向数据流
- 状态变化触发重组
- 优化更新范围
3. 观察者模式：
- 注册状态变化监听
- 触发UI更新
- 管理生命周期
6. 跨平台抽象层
// 通用绘制接口
expect abstract class Canvas {
fun drawRect(rect: Rect, paint: Paint)
fun drawText(text: String, x: Float, y: Float, paint: Paint)
// ... 其他绘制方法
}
// 平台特定实现
actual abstract class Canvas {
actual fun drawRect(rect: Rect, paint: Paint) {
// 调用平台特定的绘制API
}
}
优化机制解释：
1. 重组优化：
- 跳过不必要的重组
- 局部更新机制
- 懒加载支持
2. 缓存策略：
- 布局结果缓存
- 渲染命令缓存
- 位图缓存
3. 内存管理：
- 自动回收无用缓存
- 内存压力处理
- 资源复用
平台适配解释：
1. 绘制适配：
- 转换为平台原生绘制指令
- 处理平台特定的渲染特性
- 优化平台性能
2. 事件系统：
- 统一事件模型
- 手势识别
- 输入处理
3. 资源管理：
- 平台资源加载
- 资源缓存
- 内存管理
。
7. 状态管理和更新机制
// 1. 状态管理
class ComposeState<T> {
private var value: T
private val observers = mutableListOf<() -> Unit>()
fun setValue(newValue: T) {
value = newValue
notifyObservers()
}
}
// 2. 重组调度器
class RecompositionScheduler {
fun scheduleRecomposition(node: ComposeNode) {
// 安排重组
mainScope.launch {
node.recompose()
}
}
}
8. 布局系统
// 1. 约束传递
data class Constraints(
val minWidth: Int,
val maxWidth: Int,
val minHeight: Int,
val maxHeight: Int
)
// 2. 测量结果
data class MeasureResult(
val width: Int,
val height: Int,
val alignmentLines: Map<AlignmentLine, Int>
)
// 3. 布局实现
abstract class LayoutNode {
fun measure(constraints: Constraints): MeasureResult {
// 执行测量
return MeasureResult(width, height, alignmentLines)
}
}
9. 性能优化
// 1. 渲染缓存
class RenderCache {
private val cache = mutableMapOf<Any, DrawNode>()
fun getCachedNode(key: Any): DrawNode? {
return cache[key]
}
}
// 2. 布局缓存
class LayoutCache {
private val measureCache = mutableMapOf<Constraints, MeasureResult>()
fun getCachedMeasurement(constraints: Constraints): MeasureResult? {
return measureCache[constraints]
}
}
10. 实际应用示例
// 跨平台UI组件
@Composable
expect fun PlatformButton(
onClick: () -> Unit,
content: @Composable () -> Unit
)
// Android实现
@Composable
actual fun PlatformButton(
onClick: () -> Unit,
content: @Composable () -> Unit
) {
Button(
onClick = onClick,
content = content
)
}
// iOS实现
@Composable
actual fun PlatformButton(
onClick: () -> Unit,
content: @Composable () -> Unit
) {
UIKitButton(
onPress = onClick,
content = content
)
}
这就是 Compose Multiplatform 在 Android 平台的 UI 渲染原理。它通过 Skia 渲染引擎提供统一的绘制能力，同时利用平台特定实现来优化性能和用户体验。理解这些原理对于开发高性能的跨平台应用非常重要。
KMP的开发流程
详细讲解 KMP (Kotlin Multiplatform) 的开发和分发流程。
1. 项目结构设置
graph TD
A[KMP Project] --> B[commonMain]
A --> C[androidMain]
A --> D[iosMain]
A --> E[desktopMain]
B --> F[Shared Logic]
C --> G[Android Specific]
D --> H[iOS Specific]
E --> I[Desktop Specific]
基本项目结构：
project/
├── gradle/
├── shared/
│ ├── commonMain/
│ ├── androidMain/
│ ├── iosMain/
│ └── desktopMain/
├── androidApp/
├── iosApp/
└── desktopApp/
2. 配置构建脚本
项目级 build.gradle.kts:
plugins {
kotlin("multiplatform") version "1.9.0"
id("com.android.application")
id("org.jetbrains.compose")
}
kotlin {
// 目标平台配置
android()
ios()
jvm("desktop")
// 源集配置
sourceSets {
val commonMain by getting {
dependencies {
implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.material)
}
}
val androidMain by getting {
dependencies {
implementation("androidx.appcompat:appcompat:1.6.1")
}
}
val iosMain by getting
val desktopMain by getting
}
}
3. 共享代码实现
共享业务逻辑：
// commonMain/kotlin/com/example/shared/
expect class Platform {
fun getPlatformName(): String
}
actual class Platform actual constructor() {
actual fun getPlatformName(): String = "Common"
}
共享UI组件：
// commonMain/kotlin/com/example/shared/ui/
@Composable
fun CommonButton(
onClick: () -> Unit,
text: String
) {
Button(onClick = onClick) {
Text(text)
}
}
4. 平台特定实现
Android实现：
// androidMain/kotlin/com/example/shared/
actual class Platform actual constructor() {
actual fun getPlatformName(): String = "Android"
}
// Android特定UI
@Composable
actual fun PlatformSpecificView() {
AndroidView { context ->
// Android原生视图
}
}
iOS实现：
// iosMain/kotlin/com/example/shared/
actual class Platform actual constructor() {
actual fun getPlatformName(): String = "iOS"
}
// iOS特定UI
@Composable
actual fun PlatformSpecificView() {
UIKitView { context ->
// iOS原生视图
}
}
5. 打包流程
Android打包：
android {
defaultConfig {
applicationId = "com.example.app"
versionCode = 1
versionName = "1.0"
}
buildTypes {
release {
isMinifyEnabled = true
proguardFiles(getDefaultProguardFile("proguard-android.txt"))
}
}
}
iOS打包：
// Xcode配置
kotlin {
ios {
binaries {
framework {
baseName = "shared"
export(project(":shared"))
}
}
}
}
6. 分发流程
Android分发：
# 生成APK
./gradlew assembleRelease
# 生成Bundle
./gradlew bundleRelease
# 上传到Play Store
./gradlew publishBundle
iOS分发：
# 构建Framework
./gradlew :shared:packForXcode
# 使用Xcode打包和分发
xcodebuild -workspace iosApp.xcworkspace -scheme iosApp archive
7. CI/CD配置
GitHub Actions配置：
name: KMP Build & Deploy
on:
push:
branches: [ main ]
jobs:
build:
runs-on: macos-latest
steps:
- uses: actions/checkout@v2
- name: Set up JDK
uses: actions/setup-java@v2
with:
java-version: '17'
- name: Build Android
run: ./gradlew assembleRelease
- name: Build iOS
run: ./gradlew :shared:packForXcode
8. 版本管理
// 版本控制配置
object Versions {
const val app = "1.0.0"
const val kotlin = "1.9.0"
const val compose = "1.5.0"
}
android {
defaultConfig {
versionName = Versions.app
}
}
9. 资源管理
// 共享资源
commonMain/
├── resources/
│ ├── drawable/
│ └── strings/
// 平台特定资源
androidMain/
├── res/
iosMain/
├── Resources/
10. 测试配置
kotlin {
sourceSets {
val commonTest by getting {
dependencies {
implementation(kotlin("test"))
}
}
val androidTest by getting
val iosTest by getting
}
}
11. 发布检查清单
1. 版本号更新
2. 更新日志准备
3. 测试用例验证
4. 性能检测
5. 签名配置
6. 混淆规则
7. 资源优化
8. 平台兼容性检查
12. 监控和分析
// 添加分析工具
dependencies {
implementation("io.firebase:firebase-analytics")
implementation("io.crashlytics:crashlytics")
}
这个完整的开发和分发流程确保了：
- 代码共享最大化
- 平台特性充分利用
- 构建过程自动化
- 分发流程标准化
- 质量保证系统化
通过这种方式，可以高效地开发和维护跨平台应用。
skia 与 各个平台图形API的交互
让我详细解释 Skia 与各平台图形 API 的交互原理。
1. Skia 架构层次
graph TD
A[Skia Graphics Library] --> B1[OpenGL Backend]
A --> B2[Vulkan Backend]
A --> B3[Metal Backend]
A --> B4[Direct3D Backend]
A --> B5[Software Rasterizer]
B1 --> C1[OpenGL ES/OpenGL]
B2 --> C2[Vulkan API]
B3 --> C3[Metal API]
B4 --> C4[Direct3D API]
B5 --> C5[CPU Rendering]
2. 平台特定实现
Android 平台：
// Android平台Skia初始化
class SkiaGLRenderer {
// 创建EGL上下文
void initializeGL() {
eglContext = eglCreateContext(
eglDisplay,
eglConfig,
EGL_NO_CONTEXT,
contextAttribs
);
// 初始化Skia GL接口
GrGLInterface* glInterface =
GrGLCreateNativeInterface();
// 创建Skia上下文
context = GrContext::MakeGL(glInterface);
}
}
iOS 平台：
// iOS平台Metal实现
class SkiaMetalRenderer {
// 初始化Metal
void initializeMetal() {
id<MTLDevice> device = MTLCreateSystemDefaultDevice();
// 创建Metal命令队列
commandQueue = [device newCommandQueue];
// 初始化Skia Metal后端
context = GrContext::MakeMetal(
device,
commandQueue
);
}
}
3. 渲染管线
// Skia渲染管线抽象
class SkiaRenderPipeline {
private var surface: Surface? = null
// 1. 准备渲染表面
fun prepareSurface(width: Int, height: Int) {
val surfaceProps = SurfaceProps(
pixelGeometry = PixelGeometry.RGBA,
flags = SurfaceProps.FLAG_NONE
)
surface = Surface.makeRenderTarget(
context = skiaContext,
budgeted = true,
imageInfo = ImageInfo.makeN32Premul(
width, height
),
surfaceProps = surfaceProps
)
}
// 2. 执行渲染
fun render(drawCommands: List<DrawCommand>) {
val canvas = surface?.canvas ?: return
canvas.save()
drawCommands.forEach { command ->
when (command) {
is DrawRect -> canvas.drawRect(
command.rect,
command.paint
)
is DrawPath -> canvas.drawPath(
command.path,
command.paint
)
// 其他绘制命令...
}
}
canvas.restore()
// 刷新并提交到GPU
surface?.flush()
}
}
4. 硬件加速集成
// 硬件加速渲染器
class HardwareRenderer {
// 1. GPU上下文创建
void createGPUContext() {
#ifdef ANDROID
// Android OpenGL ES上下文
createGLESContext();
#elif defined(IOS)
// iOS Metal上下文
createMetalContext();
#else
// 其他平台...
#endif
}
// 2. 渲染缓冲区管理
void manageBuffers() {
// 创建帧缓冲
GrBackendRenderTarget renderTarget(
width,
height,
samples,
stencilBits,
platformSpecificConfig
);
}
}
5. 平台图形API桥接
// OpenGL桥接
class GLBridge {
void bridgeToSkia() {
// 创建OpenGL接口
sk_sp<GrGLInterface> interface =
GrGLMakeNativeInterface();
// 连接到Skia
context = GrContext::MakeGL(interface);
}
}
// Metal桥接
class MetalBridge {
void bridgeToSkia() {
// 创建Metal接口
GrMtlBackendContext backendContext;
backendContext.fDevice = device;
backendContext.fQueue = queue;
// 连接到Skia
context = GrContext::MakeMetal(
backendContext
);
}
}
6. 渲染优化
class RenderOptimizer {
// 1. 渲染缓存
private val cache = mutableMapOf<Int, Surface>()
// 2. 批处理优化
fun batchDraw(commands: List<DrawCommand>) {
val canvas = surface.canvas
canvas.save()
// 合并相似绘制操作
val batchedCommands = commands.groupBy {
it.paint.shader
}
batchedCommands.forEach { (shader, cmds) ->
// 一次性设置着色器
canvas.shader = shader
cmds.forEach { it.execute(canvas) }
}
canvas.restore()
}
// 3. GPU内存管理
fun manageGPUMemory() {
// 监控GPU内存使用
val memoryUsage = context.getResourceCacheUsage()
if (memoryUsage > threshold) {
context.purgeResourcesNotUsedInMs(5000)
}
}
}
7. 具体交互流程
- 初始化阶段：
// 1. 检测平台
val platform = when {
isAndroid -> RenderBackend.GLES
isIOS -> RenderBackend.METAL
else -> RenderBackend.SOFTWARE
}
// 2. 创建对应后端
val backend = when (platform) {
RenderBackend.GLES -> GLBackend()
RenderBackend.METAL -> MetalBackend()
else -> SoftwareBackend()
}
- 渲染阶段：
// 1. 准备渲染
backend.prepare()
// 2. 执行Skia绘制命令
canvas.drawSomething()
// 3. 提交到GPU
backend.flush()
- 同步机制：
class RenderSync {
fun syncWithPlatform() {
// 等待GPU完成
context.flush()
// 平台同步
when (platform) {
is AndroidPlatform ->
glFinish()
is IOSPlatform ->
metalCommandBuffer.commit()
}
}
}
8. 性能考虑
- 渲染策略：
class RenderStrategy {
// 1. 选择最优渲染路径
fun chooseRenderPath() {
when {
hasGPU && supportsHardwareAcceleration ->
useHardwareRenderer()
else ->
useSoftwareRenderer()
}
}
// 2. 动态调整
fun adjustQuality(fps: Float) {
if (fps < targetFps) {
reduceQuality()
}
}
}
这就是 Skia 与各平台图形 API 交互的核心机制。Skia 通过提供统一的抽象层，在底层使用不同的图形 API 实现，确保了跨平台的渲染一致性和性能。
