- #每天一个知识点#
Jetpack Compose 基于可组合函数构建,下面用最简示例印证和解读
```kotlin
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Greeting("Compose")
}
```
它的核心是可组合函数,用`@Composable`注解标记普通Kotlin函数,和传统View的XML布局、View树模式不同。注解告诉编译器:该函数用来描述UI,可嵌套调用其他`@Composable`函数、参与重组。函数不返回View实例,只声明界面内容,属于声明式UI,描述状态对应的界面,而非命令式修改控件。
`Greeting`接收name参数,调用内置`Text`渲染文本。入参即UI状态,状态变化触发重组,函数重跑生成新UI描述。重组不是全量重绘,编译器记录调用点,只执行受状态影响分支,局部更新带来高性能。
`@Preview`给Android Studio预览使用,不会打入APK。`GreetingPreview`是预览入口,传固定参数调用Greeting,编辑器侧边直接预览,不用开模拟器;`showBackground=true`增加底色,方便看文本范围。
对比传统View:XML是静态布局,拿到控件后调用setText等命令API更新;Compose把UI写在Kotlin中,布局控件逻辑合一,省去布局解析、找控件的开销。可组合函数两点规则:只能在其他`@Composable`函数内调用;参数尽量不可变,状态单独抽取,不要在内部维护可变变量,防止重组异常。
这个小样浓缩了Compose核心:UI由可组合函数嵌套组合,入参驱动界面、状态驱动重组。Text、Button、Column等控件都是系统封装的可组合函数,业务页面就是自定义组件层层拼装,这就是Compose“组合”的含义。6 赞 · 1 评论 - 1 赞 · 2 评论
- #每天一个知识点#
CMP跨端共享UI介绍和原理解读
CMP(Compose Multiplatform)由JetBrains打造,基于Jetpack Compose声明式语法构建跨端共享UI体系,支持Android、iOS、桌面、Web多平台复用,和Flutter全自绘像素路线有着本质区别。CMP的核心是**一份Compose UI定义,多平台差异化渲染**,并不生成SwiftUI或原生View业务代码,以此实现布局、组件、动效、状态逻辑的跨端复用。
底层依托Compose组合函数与快照状态机制:@Composable函数描述UI结构,采用组合模型替代类继承;快照系统自动追踪状态依赖,状态变更时触发局部重组,只刷新变化节点,控制渲染开销。Android端直接复用Jetpack Compose成熟渲染链路,对接原生View体系;iOS、桌面、Web端切换对应渲染后端,依托Skia完成组件绘制。
它最大优势是语法与Jetpack Compose完全同源,Android开发者上手几乎无门槛。同时提供expect/actual机制,作为原生能力桥接:主体UI保持共享,平台特有能力(系统控件、专属交互、硬件接口)可单独封装,做到UI统一的前提下,保留平台原生体验,不会强行抹平HIG、M3这类平台设计范式差异。
短板同样清晰:iOS侧并非原生控件渲染,无障碍、系统手势适配需要额外投入;生态体量、成熟度不及原生与Flutter,复杂定制场景坑点更多。CMP更适合深耕Compose栈、多端UI视觉一致性要求高,又需要灵活接入少量原生能力的项目,是兼顾开发效率、声明式设计思想的跨端UI方案。4 赞 · 1 评论