Jetpack Compose 基础知识

设计理念

函数式

在 Jetpack Compose 中，每一个组件都是用@Composable注解标注的函数，我们可以通过调用这些函数，将组件放到屏幕上（下方是Text文本组件的部分源码）。

// Text.kt

@Composable
fun Text(
    text: String,
    ...
) { ... }

Note： 一般情况下，@Composable函数首字母需要大写，如果该函数返回值不为Unit，则需要小写。

与传统的.xml布局相比，Jetpack Compose 的@Composable函数书写更加简单。如果你使用传统.xml写一个文本，需要写这么多（类似html，如果学过的话）：

<TextView
    android:text="Hello Jetpack Compose." />

而使用 Jetpack Compose，你只需要这么写：

Text("Hello Jetpack Compose.")

声明式

在传统.xml中，如果要改一个TextView显示的文字，需要在.xml中给TextView添加android:id，然后在代码中通过该id查找组件，再对该组件的text属性赋值。

而在 Jetpack Compose 中，并不需要这么麻烦，我们只需要描述某一页面具有的组件、变量等，某一值改变时，使用该值的组件会自动改值。

// 啊，我们还没开始学，就看看就行
// 我会尽量将注释写清楚
// 其实把 text 理解为一个 String 变量就行
// 这里的 text 属性委托 mutableStateOf
var text: String by remember { mutableStateOf("Hello Kotlin") }

// 使用 Column 让内容垂直排列
Column {
	// 使用 Text 显示 text 的值
    Text(text)
    
    // 使用 Button 显示一个按钮
    // 当它被点击时 text 值会变
    // Text 显示的内容也会变
    Button(onClick = { text = "Hello Jetpack Compose" }) {
        Text("改变文本")
    }
}

兼容性

Jetpack Compose 并不是与传统分道扬镳，ComposeView组件可以在.xml中使用，并且可以向其中添加 Compose 代码。

ComposeView(this).setContent { 
	Text("Hello Jetpack Compose.")
}

Kotlin DSL

DSL（Domain Specific Language），领域特定语言。我们在 Jetpack Compose 中能够用到 Kotlin 的特性。最常见的要数尾部 lambda 外移，这让我们的代码能更直观地嵌套（这里点明批评 Flutter）。

// 这里是一个按钮
// 它的最后一个参数是一个函数
// 在传参时可以将其外移
Button(onClick = { /*按钮被点击会触发*/ }) {
	Text("Button")
}

// 当然，你也可以这样写
// 但是不推荐
Button(
	onClick = { /*按钮被点击会触发*/ },
    content = {
        Text("Button")
    }
)

Material Design

Jetpack Compose 的组件库基于 Material Design 设计，我们只需要用就行了。

资源

Android 官方文档
Bilibili 扔物线 - 朱凯
扔物线的 Jetpack Compose 文档（2023年已归档）
Compose Multiplatform 优秀库整合