新-Jetpack Compose：从上手到进阶再到高手

Jetpack Compose：从上手组件使用到进阶状态管理，再到高手级自定义布局

Jetpack Compose 作为 Android 官方推荐的现代声明式 UI 框架，通过纯 Kotlin 语法简化了 UI 开发流程。本文将从基础组件使用切入，逐步深入状态管理核心技巧，最终通过实战案例掌握自定义布局的高阶玩法，助您快速构建高性能、可维护的现代化 Android 界面。

---

一、上手阶段：基础组件与布局实践

1. 基础组件快速入门

Compose 的 UI 构建基于可组合函数（@Composable），核心组件通过参数配置实现动态效果：

kotlin
@Composable
fun BasicComponentsDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 文本组件
        Text(
            text = "Hello Compose!",
            style = TextStyle(
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                color = Color.Blue
            )
        )
        
        // 按钮组件
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = { /* 按钮点击逻辑 */ },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Green,
                contentColor = Color.White
            )
        ) {
            Text("Click Me")
        }
        
        // 图片组件（需配合 Coil 或 Glide 使用）
        Spacer(modifier = Modifier.height(16.dp))
        val painter = rememberImagePainter(data = "https://example.com/image.jpg")
        Image(
            painter = painter,
            contentDescription = "Sample Image",
            modifier = Modifier.size(200.dp),
            contentScale = ContentScale.Crop
        )
    }
}

关键点：

• 通过 Modifier 链式调用控制布局属性
• 使用 Spacer 控制组件间距
• 图片加载推荐使用 coil-compose 库

2. 常用布局容器

Compose 提供三种基础布局容器，通过组合实现复杂界面：

kotlin
@Composable
fun LayoutContainersDemo() {
    // 垂直布局（Column）
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        repeat(3) { index ->
            Text("Column Item $index", modifier = Modifier.padding(8.dp))
        }
    }
    
    // 水平布局（Row）
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        repeat(3) { index ->
            Box(
                modifier = Modifier
                    .size(50.dp)
                    .background(Color.LightGray)
            ) {
                Text("Row $index", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
    
    // 层叠布局（Box）
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.Cyan)
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Magenta)
                .align(Alignment.TopEnd)
        )
        Box(
            modifier = Modifier
                .size(80.dp)
                .background(Color.Yellow)
                .align(Alignment.BottomStart)
        )
    }
}

布局特性对比：

容器	方向	对齐方式	典型场景
Column	垂直	verticalArrangement	表单、列表项
Row	水平	horizontalArrangement	工具栏、标签组
Box	层叠	alignment + contentAlignment	徽标、悬浮按钮

二、进阶阶段：状态管理与数据流

1. 状态管理核心机制

Compose 通过 State 对象实现 UI 自动更新，核心模式包括：

(1) 局部状态管理

kotlin
@Composable
fun CounterDemo() {
    var count by remember { mutableStateOf(0) } // 状态记忆
    
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Count: $count", style = TextStyle(fontSize = 24.sp))
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

(2) ViewModel 状态共享

kotlin
// ViewModel 层
class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()
    
    fun increment() {
        viewModelScope.launch { _count.update { it + 1 } }
    }
}
 
// Compose 层
@Composable
fun ViewModelCounterDemo(viewModel: CounterViewModel = viewModel()) {
    val count by viewModel.count.collectAsState()
    
    Column {
        Text("ViewModel Count: $count")
        Button(onClick = viewModel::increment) {
            Text("Increment via ViewModel")
        }
    }
}

2. 列表状态优化

使用 LazyColumn 实现高性能列表，结合 rememberLazyListState 管理滚动状态：

kotlin
@Composable
fun OptimizedListDemo() {
    val items = List(100) { "Item $it" }
    val listState = rememberLazyListState()
    
    LazyColumn(state = listState) {
        items(items) { item ->
            Text(
                text = item,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .background(Color.LightGray)
            )
        }
    }
    
    // 滚动到顶部按钮
    Button(
        onClick = { listState.animateScrollToItem(0) },
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(16.dp)
    ) {
        Text("Scroll to Top")
    }
}

性能优化技巧：

• 使用 itemsIndexed 获取项索引
• 对复杂列表项使用 key 参数避免重复重组
• 结合 Paging 3 实现分页加载

三、高手阶段：自定义布局与动画

1. 自定义布局实现

通过 Layout 可组合函数创建完全自定义的布局容器：

kotlin
@Composable
fun CircularLayout(
    modifier: Modifier = Modifier,
    radius: Dp = 100.dp,
    children: @Composable () -> Unit
) {
    Layout(
        modifier = modifier.size(radius * 2),
        content = children
    ) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        
        layout(constraints.maxWidth, constraints.maxHeight) {
            val centerX = constraints.maxWidth / 2
            val centerY = constraints.maxHeight / 2
            val angleStep = 360f / placeables.size
            
            placeables.forEachIndexed { index, placeable ->
                val angle = Math.PI * 2 * index / placeables.size
                val x = centerX + (radius * cos(angle)).toInt() - placeable.width / 2
                val y = centerY + (radius * sin(angle)).toInt() - placeable.height / 2
                
                placeable.placeRelative(x, y)
            }
        }
    }
}
 
// 使用示例
@Composable
fun CircularLayoutDemo() {
    CircularLayout(radius = 150.dp) {
        repeat(6) { index ->
            Box(
                modifier = Modifier
                    .size(60.dp)
                    .background(Color.hsv(index * 60f, 0.8f, 0.8f))
            ) {
                Text("$index", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

2. 高级动画实现

结合 animate*AsState 和 Transition 实现流畅动画：

kotlin
@Composable
fun AnimatedButtonDemo() {
    var isPressed by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (isPressed) 0.9f else 1f,
        animationSpec = tween(durationMillis = 200)
    )
    val color by animateColorAsState(
        targetValue = if (isPressed) Color.DarkGray else Color.Blue,
        animationSpec = tween(durationMillis = 300)
    )
    
    Box(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = { isPressed = true },
                    onRelease = { isPressed = false }
                )
            }
    ) {
        Button(
            onClick = { /* 按钮逻辑 */ },
            modifier = Modifier
                .scale(scale)
                .align(Alignment.Center),
            colors = ButtonDefaults.buttonColors(backgroundColor = color)
        ) {
            Text("Animated Button")
        }
    }
}

动画类型选择指南：

动画类型	适用场景	示例
animate*AsState	简单状态变化动画	颜色/尺寸过渡
Transition	复杂状态机动画	加载状态切换
AnimationSpec	自定义动画曲线	弹跳/回弹效果
infiniteRepeatable	循环动画	加载指示器

四、最佳实践总结

1. 状态管理原则：

   • 遵循"单一数据源"原则
   • 局部状态用 remember，跨组件状态用 ViewModel
   • 避免在 Composable 中直接修改 ViewModel 状态

2. 性能优化技巧：

   • 使用 remember 缓存计算结果
   • 对频繁重组的组件使用 key 参数
   • 复杂列表结合 Paging 3 和 DiffUtil

3. 自定义布局开发流程：

   • 先实现基础测量逻辑
   • 再处理子元素放置
   • 最后添加动画和交互

4. 调试工具推荐：

   • Layout Inspector 查看组件树
   • Compose Animation Preview 预览动画
   • Android Studio 的 Compose 实时模板

通过系统掌握从基础组件到高级布局的完整知识体系，开发者可以充分发挥 Jetpack Compose 的声明式优势，构建出既美观又高效的现代化 Android 界面。建议从简单案例入手，逐步尝试复杂布局和动画实现，最终形成自己的 Compose 开发方法论。