Compose 于2019年的 Google IO大会初度发布，其时感觉远景并不达观，想推翻已存在10年之久的现有视图系统谈何简略，更何况将来与 Flutter 等同门兄弟的联络又该怎样共处？

时隔仅两年，本届 IO 大会上就宣告 Compose 1.0 行将到来。其实从年头 Beta 版的一系列造势协程网活动就能看出 Googlwebview是什么东西e 在 Compose 推广上的决计之大，只要官方发力编程言语都能够短期内切换，更何况一mvvm形式和mvc的差异个UI结构？因而协程网不用置疑， Compose 必将成为新的UI开发规范。

跟mvvm规划形式着稳定版的到来，现在正是学习 Compose 的好时机。让我们借本次 GoogleIO 上的内容，了解一下 Compose 将为 Android 开发带来哪些改kotlin和java动

1. 为什么要用 Compose ？

---

Jetpack Compose is Android’s modern toolkit fkotlin为什么盛行不起来or buildi产品生命周期ng native UI.

这是官方对 Compose 的界说。经过与 Android 现有视图系统比照就能了解为什么 Compose 愈加 “现代”

现有的 Android 视图系统从 2010年 以来没有产生太大改动，10年间无论从硬件规范仍是 APP 凌乱度都产生了极大改动，这套现已跑了10年的技术系统产品质量法也现已显得有些掉队。

近年来，React产品介绍等声明式结构的呈现改动了前端的开发办法，Android 正是学习了 React 的思维开发出了Jetpack Compose这一声明式UI结构， 运用 Compose 能够明显削减创立页面的时间，行进UI开发功率。

2. 声协程 线程明式 VS 指令式

---

现行的 Andoird 视图系统归于传统的指令式开发办法协程教育，一般运用XML布局，然后经过 findViewById 获取控件的引用，指令式地更新状况、改写UI。指令式的视图系统有以下特性：

• UI是可协程app变的：控件接kotlin言语受指令后经过改动本身改写UI
• UI持有State：控件的改动正是经过改动本身状况完毕的

跟着界面越webview烘托有什么用来越mvvm和mvc的差异凌乱，控件越来越webview组件多，各控件 St产品规划专业ate 难以坚持同步，UI闪现不一致的Bug频发。我们的许多协程电话精力花费在了怎样能准确且不遗漏地更新悉数该更新的控件上。

声明式UI与指令式UI的特征截然相反，正好能够补偿指令式的缺陷：

• UI不可变 : @Composable函数不回来任何可引用句柄，无法被外界改动。
• UI不持有Stawebview烘托有什么用te: @Composable函数无法持有状况的，闪现的数据都需求经过参数传入。

声明式UI以一个“纯函数”的办法工作，当 State 改动时函数从头实施改写UI。

KeyPoint: Compose运用 @Composablwebview是什么东西e 函数来构建UI能够更好地遵webview版本循声明式UI的特征

3. 依据 Kotin 的 DSL

---

声明式UI需求有一个与之匹配的 DSL 语协程电话言做支撑，例如 React 中的 JSX。在 Android 全面拥抱 Kotliwebview最新版下载n 的今天，Kotlin DSL 几乎是仅有选项，庆幸的是 Kotlin DSL 确实满意强健和好用。

KeyPoint: 运用 DSL 组装 UI 的进程其实便是对 @Composable 函数的界说进程。

@Composable
fun Mess协程之窗ageList(mwebview版本essages: List<String>) {
Column {
if (message.size == 0) {
Text("No messages"）
} else {
messag协程官网e.forEach { message ->
Text(text=messag)
}
}
}
}

上面比方中 MessageList 是一个展示音讯列表的UI组件， 参数 message 即展示的数据。DSL 让我们能够很直观地书写多层嵌套UI ，例如在 MessageList 中嵌套 Column、Text 等。

Kotlin DSL 是图灵齐备的，容许我们在构建UI的一起，同步增加逻辑：当没有音讯时闪现 ”NO message“ 。 这是 JSX 这类符号型的 DSL 所无法完毕的。

当 message 产生改动时，MessageList 从头实施，这个进程叫重组（recomposition）。 Composee 的 UI 正是经过不断重组来协程电话完毕改写。

4. 高功用的重组

---

当数据改动时会触发重组，许多人担忧大面积的重组是否会影响功用。

Compose 也采用了相似 React VirtualDom 的Kotlin思维，经过 diff 完毕部分改写，以行进功用。不同的是，ComposeMVVM 没有运用树形结构，而是在 Gap Buffer 这样线性结构上进行 diff。但本质上是相同的，能够将 Gap Buffer 了解为一个树形结构经 DFS 处理后的数组，数组单元经过 key 符号其在树上的方位信息。

Compose 在编译期为 Composable 生成带有方位信息的 key，存入到 Gap Buffer 数组的对应方位。工作时能够依据 key 来识别 Composable 节点是否产生了方位改动，以决议是否参加重组。

一起，Gap Buffer 还会记载 Composable 目标相关的状况（State 或kotlin和java Parameters），只是当相关状况改动时，Composable 才会参加重组mvvm形式，函数才会从头实施。

KeyPoint: Compose 编译器保证 Composable 尽可能越过不用要的重组，有利于行进 Compose 的重绘功用

5. State 处理

---

Compose 的中产品规划专业心是 State 驱动 UI，UI 是 State改动后协程教育的产品。 传统视图系统，State产品规划 只是 UI 控件的特征，UI一旦创立后会长期存在。

KeyPoinwebview更新t: 传统开发State从归于UI，产品质量法Compose中UI依附于State

经过一个 Checkbox 的比方能够更好地了解协程教育 State 与mvvm规划形式 UI 的联络：

@Com协程电话posable
fun MessageListwebview烘托有什么用(messages: List<String>) {
Column {
var selectAll by remember { mutableStateOf(false) }
Checkbox（
checmvvm规划形式ked = selectAll,
onCheckChange = { checked ->
selectAll = checked
}
）
...
}
}

selectAll 是 CheckBox 能够参照和修正的 state。 勾选 Checkbox ，selectAll 产生改动，Checkbox 产生重组更新状况。

相关于 Checkbox 的重组产品介绍，selectAll 经过 remember { } 能够跨过重组而持续存在。Composable 许多学习了 React Hooks 的规划，例如 remember{} 就参看了 useMemo()。mvvm原理

6.kotlin现状 数据流单向活动

---

selectAll 状况改动，Checkb产品策略ox 重组，数据永远是自上而下的单向活动webview烘托有什么用。我们把规划扩大，MessageList 的数据也是经过参数从上层传入的

@Composable
fun ConversationScreen() {
val viewModel: C产品规划专业onversatioinViewModel = viewModel()
val m协程电话essage by viewModel.mvvm和mvc的差异messages.observeAsState()
MessageLit(messages)
}
@Composable
fun MessageList(message: List<String>){
..协程app.
}

Compose 能够配合现有 Jetpack 组件的运用，例如 ViewModel、LiveData 等，关于一个规范的Jetpack MVVM项目，将很简略将 UI 部分替换成 Compose。

Composalbe 中调用 viewModel() 能够获取其时 Cokotlin为什么盛行不起来ntext 的 ViewMowebview完成del， observeAsState() 将 Livemvvm原理Data 转换为 Compose State 并树立绑定。 当 LiveData 改动时，ConversationScreen 会产生重组，内部的 MessageLit 、Me产品司理ssageItem 由于依托了参数 messages，都会参加重组。

悉数子 Composalbe 的数据都来自顶层的 ScreenState ，这便是所谓的仅有可信源（Single Source Of TruthKotlin）。
我们只要关注 ScreeState，就能够推断出其时UI的状况，这种办法也很利于检验。

KeyPoint：Composable 的数据自上而下单向活动，悉数的数据都应来自顶层的仅有可信源。

7. 副作用与 Lifecycle

---

我们也能够不仰仗 ViewModemvvm和mvc的差异l， 直接在 Composalbe 中操作数据。 可是数据操作涉及 IO，不应该侍从重组重复进行，应该被作为副作用（SideEffect） 处理。

@Composable
fun ConversationScreen() {
var message = remember { mutablmvvm和mvc的差异eState产品Of(emptyList()) }
val scope = rememberCoroutineScope()
SideEffekotlin和javact {
scope.launch {
message = apiService.getMessagemvvm是什么()
}
}
MessageLit(mvvm和mvc的差异messages)
}

• SideEffect {...} 处理副作用，只在 Composable 初度上树webview最新版下载闪现时实施一次，不会随重组重复实施；
• rememberCoroutineScope() 能够获取与其时 Composalbe 相关的 CoroutieScope，当 Composable 从树上移除时，其间的协程会随之取消。

当副效mvvm形式的原理果用到协程时，也能够直接运用LaunchedEffect，愈加协程机票便利：

//LaunchedEffect中供给了CoroutineScope，能够直接发起协程
Launchemvvm是什么dEffect {
message = apiService.gmvvm的了解etMessage()
}

这儿涉及到 Composalbe 生命周期的界说：

• Enter：挂载到树上，初度闪现，类比 React 的 Mounting
• Compositiokotlin现状n：重组改写UI，类比 Rkotlin怎样读eact 的 Updating
• Lkotlin言语eave：产品运营从树上移除，不再闪现产品，类比 React 的 Unmonting

Composalbe 引进生命周期，便于处理那些非纯函数的逻辑（不能侍从重组重复实施的逻辑），mvvm形式的原理Composwebview烘托有什么用e 供给了 SideEffewebview是什么意思ct{} 等函数来处理这些逻辑

Composalbe 越挨近纯函数越利于复用，所以SideEffect、LaunchedEffect等副作用函数越少越好，引荐尽量移动到 ViewModel 中处理。

8. 功用mvvm的了解齐备的UI系统

---

KeyPoint：Compose现在的 UI系统功用齐备，能够彻底掩盖Android现有视图系统kotlin怎样读的全mvvm形式和mvc的差异部才干。

各种UI组件

悉数常见的UI组件在 Compose 中都能找到对应完毕，乃至Card、Fab、Ap产品运营pBar等 Material Designe 的控件也一应俱全、开箱即用 。

Card {
Text("Card Con产品定位tent")
}
FloatingActionButton() {
Icon(Icons.Filled.Favorite)
}
TopAppBar(
...
)

列表List

Compose 的列表十分简略，无需再写烦人的 Adapter。

@Composable
fun MessageList(list: List<Message>) {
Column {
...
LwebviewtestazyColumn { // this :LazyListScope
items(list.c协程 线程ount) { index : Int ->
when(list[index].type) {
Unread -> UnreadItem(mvvm原理message)
Readed -> Re协程adedItem(message)
}
}
}
...
}
}

• LazyColumn 保证了列表条目的懒加载
• items(count) {...} 创立 cou协程官网nt 个 item。{…} 中创立 item 的 Composalbe ，MMVVMultiType 直接用 when 句子处理，简略高效。

布局Layout

Compose 供给了多种容器类Composalbwebview烘托有什么用e，能够对子组件进行布局，简略易用且功用强健。

Rkotlin是什么意思ow {
// ≈ Horizontal LinearLayout
}
Column {
// ≈ Vertical LinearLayout
}
Box {
// ≈ FragmeLayout
}

与现有视图系统不同，Compose的布局不容许丈量多遍，即便布局多层嵌套也不会有功用问题。

我们也能够便利地进行自界说布局，经过简略的函数调用完毕 measure 和 layout 进程

Layout(
content = cmvvm和mvc的差异ontent,
modifier = modifier
) { measurables, constraints ->
// Measure the co协程电话mposables
val placeables = measurable.measure(constraints)
// Layoutwebviewtest the comopsables
layout(width, height) {
placeables.forEach { placeable ->
placeable.place(x, y)
}
}
}

Modifier操作符

Compose 经过 经过一系列链式调用的Modifier操作符来装饰 Composable 的外观。 操作符品种繁复，例如size、back协程游览grounds、padding的设置以及 click工作的增加等。

ModifierKotlin修饰前	Modifier修Kotlin饰后

@Composable
fun FollowBtn(modifier: Modifier) {
Text(
text = "Follow",
style = typography.body1.copy(colo产品规划r = Colo协程appr.White),
textAlign = TextAlign.Center,
modifier = modifier //在外部装饰的基础上进一产品定位步增加装饰
.clickable(产品onC产品licWebViewk = {...})
.shadow(3.dp, shape = backgroundShape)
.clip(RoundedCornerShape(WebView4.dp))
.background(
brush = Brmvvm是什么ush.verticalGradient(
colors = lisKotlintOf( Red500, orange700),
startY = 0f,
endY = 80f
)
)
.padding(6.dpkotlin和java)
)
}

Modifier 的链式调用便于在外层装饰的基础上进一步装mvvm和mvc的差异饰，一起 Modifier 会集配备的办法也有利于对在多个 Composalbe 之间复用。

动画Animatioin

Compose 动画也是依据 State 驱动不断重组完毕的

@Composable
fun AnimateAsStateDemo() {
var isHighLight by remember { mutableStateOf(false) }
val color by animateColorAsState (
if (isHighLight) Red else Blue,
)
vawebview是什么东西l sizekotlin现状 by animateDpAsState (
if (isHighLight) LargeSize else SizeSize协程网订机票,
)
Box(
Modifier
.size(size)
.back产品生命周期ground(color)
)
}

isHighLight 状况改动时，Color 和 Size 以动画的办法进行过度

主题Theme

Compose 的 Theme 摆脱了对 XML 的运用。Theme 一般会作为最顶层的 Composalbe 呈现kotlin怎样读，悉数内部 Composalbe 都会运用其时主题的配备。

主题切换也变得十分mvvm的了解简略。例如依据系统Dark/Light主题，为自界说主题设置webview下载不同色彩：

@Composalb协程电话e
fun YellowTheme(
content: @mvvm形式Composalbe () -> Unit
) {
val colors = if (isSystemInDarkTheme()) {
YellowThemeDark
} else {
YellowThemeLight
}
MaterialTheme(colors, conent)
}

APP中运用自界说主题：

@Composalbe
fun TopicScreen() {
YellowTheme {
Scaffold(
backgroudndCkotlin怎样读olor = Materia协程lTheme.colors.surface
) {
TopicList()
}
}
}

Light	Dark

9. 开发中实时预览

---

现状依据 XML 的预览作用很鸡肋，导致许多开发者协程都习惯于实机工作查mvvm是什么看UI。

KeyPoint: Compose 预览机制能够做到与真机无异，真实的所见所即得。kotlin言语

当我们相对对下面的 Composable 进行预览时

@Composable
fun Greeting(n协程ame: Stri产品规划专业ng) {
Te协程appxt (text = "Hello $name!")
}

只需创立一个无参的 Composalbe，并增加 @Preview 注解即可

@Preview
@Composable
fun PreviewGreeting() {
Greeting("Android")
}

@Prevkotlin现在不火了iew 的 Composalbewebview组件 不会编译进终究产品，对包巨细没有影响。并且 @Preview 能够作为进口直接工作在设备上查看，也正因如此，不能为它的签名增加任何参数。

10. 超卓的互操作性

---

KeyPoint:webviewtest Compose 能够与现有 View 系统能一起运用，你能够为一个既有项目引进 Compose，并逐渐切换。

有一些功用性的控件现在仍然需求原生 View 的支撑，比方 WebView、MapView 等，经过kotlin现状超卓的互操作功用够为 Compose 取得更多原生支撑。

@Composable
fun WebView() {
val url = remember { mutableStateOf(...) }
// 增加Adds view to Compose
AndroidView(
modifier = Modifier.fillMawebview烘托有什么用xSwebview组件izekotlin是什么意思()
factory = { context ->
// 创立原生的Wemvvm的了解bView供Cokotlin现状mpose运用
WebViwebview完成ew(context).apply {
...
}
},
update = {mvvm形式和mvc的差异 view ->
// 当Satte改动时，能够在这儿更新原生的CustomView
view.loadUrl(u协程apprl)
}
)
}

11. 总结 & 展产品规划望

---

不可否webview烘托有什么用认，Compose 与现行的UI开发办法存在较大差异，学习曲线相对峻峭。本文针对 Compose 特性的介绍点到为止，首要目的是帮我们在打开系统学习之前做一个心智上的铺垫。

终究 回想一下前文中整理的 KeyPoint：

Compose特性	KeyPoint
声明式结构	Compose 运用WebView @Composablewebview是什么东西 函数构建UI，遵从了声明式UI的特mvvm的了解色
依据Kotlinmvvm形式和mvc的差异的DSL	DSL 组产品定位装 UI 的进程其实便是kotlin怎样读对 @Composable 函数的界说进程
高功用的重组	编译器保证 Comkotlin现在不火了posable 尽可能越过不用要的重组，有利于行进重绘功用
状况处理	UI 依托于 State，State改动驱动UI改写
单向数据流	ComposabWebViewle的数据自上而下单向活kotlin现在不火了动，悉数mvvm框架的数据都应来自顶层的仅有可信源
副作用处理	Compose的生命周期机制能够处理副作用
UI系统	Compose现在的UI功用齐备，能够彻底掩盖Android现有视图系统的悉数才干
实时预览	Compomvvm规划形式se 预览机制能够做到与真机无异，真实的所见所即得
互操作性	Compose 能够与现有 View 系统并存，你能够为一个既有项目引进 Compose

未来的 Compose

本年7月 Comwebview完成pose 1.0 就会正式与咱kotlin怎样读们碰头，不webview是什么意思久正式版 AS 也将支撑 Compose 开发。

现在现已有越来越多的 Jetpack 官方库以及常用的三方库开端参加对 Compose 的支撑，跟着其生态越发完善，信赖不用多久就能够见到 Compose 在真实的项目中落地。

Compose-Desktop、Compose-Web 等项目的发布将为 Compose 供给跨途径的才干，作为 Android 开发的你未来能够经过 Compose 扩展你的开发领域、乃至延伸你的职业生涯。

失掉 Flutter 的你，不要再失掉 Compose 了。 Happy Composing！

官方学习材料

• gmvvm形式的原理oo.gle/compo产品se-pat…
• goo.gle/compose-sam…
• goo.gle/compose-doc…

中文学习项目

• docs.compose.net.cn/