先用人话理解
Jetpack Compose 是 Android 的声明式 UI 工具包。你描述当前状态下界面应呈现什么，状态变化后 Compose 会重新组合相关界面。Material 3 提供统一的按钮、排版和主题组件。
本课要点：@Composable 标记可组合函数；remember 保存组合期间的状态；mutableIntStateOf 的值变化后会触发相关 UI 更新。
代码例子
先读注释，再关注每一行如何把数据变成结果。
ANDROID · Compose 示例
package com.example.counter // 请改成你自己项目的包名
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent { MaterialTheme { Counter() } }
}
}
@Composable
fun Counter() {
var count by remember { mutableIntStateOf(0) }
Column(Modifier.padding(24.dp)) {
Text("已点击 $count 次")
Button(onClick = { count++ }) { Text("增加一次") }
Text("继续练习 Compose")
}
}再看一个用法
COMPOSE · 示例片段
@Composable
fun Greeting(name: String) {
Column {
Text(text = "你好，$name")
Text("把按钮文字改成：再加 1")
}
}动手改一改
练习：把按钮文字从“增加一次”改成“再加 1”， 再给 Column 添加一个 Text，显示“继续练习 Compose”。
查看 Android / Compose 环境指南 ↗提示：Android 专属示例需要 Android Studio 项目和对应依赖；普通 Kotlin 示例可在 Playground 中尝试。
运行要求：请在 Android Studio 中创建或打开启用了 Jetpack Compose 的 Empty Activity 项目。把示例 package 行改成项目实际包名；Compose 依赖由项目模板配置。此代码不能直接粘贴进普通 Kotlin Playground。
三道小测
先自己选择，再展开答案。答错也没关系，重要的是知道为什么。
1. @Composable 的用途是什么？
查看答案与解析
正确答案：A。回到概念和代码示例，再解释一次为什么。
2. Column 默认怎样排列子项？
查看答案与解析
正确答案：A。回到概念和代码示例，再解释一次为什么。
3. remember 常用于什么？
查看答案与解析
正确答案：A。回到概念和代码示例，再解释一次为什么。
深入阅读
想继续往下挖，可以阅读 Kotlin / Android 官方文档。
打开官方文档 ↗标记学习进度
进度保存在当前浏览器的 localStorage 中。