安卓 Compose知识总结

原创于 2025-11-10 14:19:05 发布 · 630 阅读

CC 4.0 BY-SA版权

文章标签：

Android Compose 是 Google 推出的现代安卓 UI 开发框架，基于 Kotlin 语言，采用声明式 UI范式，彻底替代了传统 XML + 代码的开发模式。其核心是 “用代码描述 UI 状态，而非操作 UI”，让 UI 开发更简洁、可维护性更高。以下是 Compose 核心知识的系统总结：

一、核心思想：声明式 UI（与传统对比）

传统命令式开发（XML + 代码）	Compose 声明式开发
先定义 UI 结构（XML），再通过代码操作 UI（如 `setText`、`setVisibility`）。	直接用代码描述 “不同状态下 UI 的样子”，状态变化时，Compose 自动重新渲染 UI。
示例：1. XML 写 `TextView`（id=tv）2. 代码中 `tv.text = "新内容"`	示例：`Text(text = state.value)`，当 `state.value` 变化时，文本自动更新。

二、基础核心：可组合函数（Composable Functions）

可组合函数是 Compose 构建 UI 的基本单元，用 @Composable 注解标记，用于描述 UI 组件。

核心特性：

注解要求：必须用 @Composable 标记，只能在其他可组合函数中调用。
命名规范：函数名以大写字母开头（类似类名，区分普通函数）。
无返回值：返回类型为 Unit（仅描述 UI，不产生数据）。
参数传递：通过参数动态控制 UI（如 Greeting(name: String) 中的 name）。

示例：

kotlin

// 自定义可组合函数：显示问候语
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!") // 嵌套调用内置Text组件
}

三、UI 组件体系

Compose 提供了丰富的内置组件，覆盖大部分 UI 需求，分为基础 UI 组件和布局组件。

1. 基础 UI 组件（常用）

组件	作用	核心参数示例
`Text`	显示文本	`text = "内容"`, `fontSize = 16.sp`, `color = Color.Red`
`Button`	可点击按钮	`onClick = { ... }`（点击事件）, `content = { Text("按钮") }`
`TextField`	文本输入框	`value = inputText`（输入内容）, `onValueChange = { inputText = it }`（输入变化回调）
`Image`	显示本地图片	`painter = painterResource(id = R.drawable.ic_logo)`, `contentDescription = "图片描述"`（无障碍支持）
`AsyncImage`	显示网络图片（依赖 Coil 库）	`model = "https://xxx.png"`（图片 URL）, `contentDescription = ""`
`Checkbox`	复选框	`checked = isChecked`（是否选中）, `onCheckedChange = { isChecked = it }`

2. 布局组件（控制子组件排列）

布局组件用于控制子组件的位置、大小和间距，是构建复杂 UI 的基础。

布局组件	作用	核心特性
`Row`	水平排列子组件	类似 `LinearLayout(horizontal)`，支持 `horizontalArrangement`（水平间距）、`verticalAlignment`（垂直对齐）。
`Column`	垂直排列子组件	类似 `LinearLayout(vertical)`，支持 `verticalArrangement`（垂直间距）、`horizontalAlignment`（水平对齐）。
`Box`	叠加排列子组件	类似 `FrameLayout`，支持子组件叠加显示，可通过 `align` 控制单个子组件的对齐位置（如右上角、中心）。
`LazyColumn`	垂直懒加载列表	类似 `RecyclerView`，只渲染可见项，优化长列表性能，通过 `items()` 绑定数据。
`LazyRow`	水平懒加载列表	水平方向的懒加载列表，适合图片轮播、横向滚动标签。
`ConstraintLayout`	复杂约束布局	通过 “约束关系” 定义子组件位置（如 “A 在 B 下方”“C 与 D 左对齐”），减少布局嵌套。

3. 辅助组件：`Spacer`

用于在布局中添加空白间距，控制组件间的距离：

kotlin

Column {
    Text("第一行")
    Spacer(modifier = Modifier.height(16.dp)) // 垂直间距16dp
    Text("第二行")
}

四、修饰符（Modifier）：控制组件外观与行为

Modifier 是 Compose 中调整组件大小、位置、样式、交互的核心工具，通过链式调用组合多个效果（类似传统 XML 的属性）。

常用修饰符：

修饰符	作用	示例
`size()`	设置宽高	`size(100.dp)`（宽高均 100dp）、`size(width = 200.dp, height = 100.dp)`
`fillMaxSize()`	填充父容器	`fillMaxWidth()`（宽充满）、`fillMaxHeight()`（高充满）、`fillMaxSize()`（宽高均充满）
`padding()`	内边距	`padding(16.dp)`（四周）、`padding(horizontal = 8.dp)`（水平方向）
`background()`	背景色 / 背景 Drawable	`background(Color.Blue)`、`background(painterResource(R.drawable.bg))`
`clickable()`	添加点击事件	`clickable { println("点击了") }`
`border()`	边框	`border(2.dp, Color.Red, RoundedCornerShape(8.dp))`（2dp 红色圆角边框）
`align()`	在父布局中对齐	在 `Row`/`Column`/`Box` 中使用，如 `align(Alignment.Center)`

五、状态管理：驱动 UI 变化的核心

状态（State）是 “可观察的数据”，当状态变化时，依赖该状态的 UI 会自动更新（声明式的核心体现）。

1. 基础状态：`mutableStateOf` + `remember`

mutableStateOf(value)：创建可修改的状态（包装数据，支持观察）。
remember { ... }：在可组合函数重组（重新执行）时保存状态，避免重置。

kotlin

@Composable
fun Counter() {
    // 定义状态：count 是当前值，修改时自动触发UI更新
    var count by remember { mutableStateOf(0) } // by 是委托语法，简化调用

    Column {
        Text(text = "计数：$count") // 使用状态
        Button(onClick = { count++ }) { Text("+1") } // 修改状态
    }
}

2. 状态提升（State Hoisting）

将状态从子组件移到父组件管理，使子组件变为 “无状态组件”（仅接收参数和回调），提升复用性：

kotlin

// 子组件：无状态，只接收参数和回调
@Composable
fun CounterDisplay(count: Int, onIncrement: () -> Unit) {
    Column {
        Text(text = "计数：$count")
        Button(onClick = onIncrement) { Text("+1") }
    }
}

// 父组件：管理状态
@Composable
fun Parent() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(count = count, onIncrement = { count++ })
}

3. 复杂状态管理（结合 Jetpack）

ViewModel：与 rememberViewModel() 配合，在组件重建（如屏幕旋转）时保留状态。
StateFlow：用于跨组件共享状态（如 UI 状态、网络数据），结合 collectAsState() 在 Compose 中收集。

kotlin

// ViewModel中定义StateFlow
class MyViewModel : ViewModel() {
    private val _uiState = MutableStateFlow("初始值")
    val uiState: StateFlow<String> = _uiState.asStateFlow()

    fun updateState(newValue: String) {
        _uiState.value = newValue
    }
}

// Compose中收集StateFlow
@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState() // 自动监听状态变化
    Text(text = uiState)
}

六、主题与样式（Material Design 3）

Compose 默认集成 Material Design 3（最新设计规范），通过主题统一 APP 的颜色、字体、形状。

主题三要素：

颜色（ColorScheme）：定义 primary（主色）、secondary（辅助色）、background（背景色）等。
排版（Typography）：定义标题、正文、按钮等文本的字体大小、粗细、行高。
形状（Shape）：定义按钮、卡片、输入框等组件的圆角大小。

自定义主题：

修改项目自动生成的 Theme.kt，调整三要素：

kotlin

// 自定义颜色
private val LightColorScheme = lightColorScheme(
    primary = Color(0xFF6200EE), // 主色
    background = Color.White
)

// 自定义排版
private val Typography = Typography(
    bodyLarge = TextStyle(
        fontSize = 16.sp,
        fontFamily = FontFamily.SansSerif,
        lineHeight = 24.sp
    )
)

// 应用主题
@Composable
fun MyTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = LightColorScheme,
        typography = Typography,
        content = content
    )
}

七、预览与调试

@Preview 注解：在 Android Studio 中实时预览 UI，无需运行 APP：

kotlin

@Preview(
    name = "手机预览",
    showBackground = true, // 显示背景
    device = "spec:width=360dp,height=640dp" // 模拟设备尺寸
)
@Composable
fun GreetingPreview() {
    MyTheme {
        Greeting("Android")
    }
}

互动预览：点击预览窗口的 “Interactive” 按钮，可在预览中模拟点击、输入等操作。

八、进阶内容（核心场景）

动画：通过 animate*AsState（属性动画）、rememberInfiniteTransition（无限动画）实现 UI 动效。
导航：使用 Navigation Compose 管理页面跳转（替代传统 Fragment 导航）。
与传统 View 互操作：通过 AndroidView 嵌入传统 View（如 MapView），或通过 ComposeView 在传统布局中使用 Compose。
性能优化：
- 减少不必要的重组（用 remember 缓存计算结果，避免在可组合函数中创建对象）。
- 长列表必用 LazyColumn/LazyRow（懒加载优化）。
- 避免在 onClick 等回调中创建可组合函数或状态。