Android Jetpack Compose 高级开发核心技术

Android Compose 高级技术总结

1. 性能优化

1.1 状态管理优化

• 状态提升原则：将状态提升到共享的最近共同父组件
• derivedStateOf：当需要基于多个状态计算派生状态时使用

val scrollState = rememberScrollState()
val showButton by remember {
    derivedStateOf { scrollState.value > 0 }
}

1.2 重组优化

• remember：缓存计算结果避免不必要的重组
• key 参数：帮助 Compose 识别列表项的唯一性

items(items = list, key = { it.id }) { item ->
    ItemView(item)
}

1.3 延迟加载

• LazyColumn/LazyRow：仅渲染可见项
• LazyLayout：自定义懒加载布局

2. 自定义布局

2.1 Layout 修饰符

fun Modifier.customLayout() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout(placeable.width, placeable.height) {
        placeable.placeRelative(x, y)
    }
}

2.2 自定义布局

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // 测量和定位逻辑
    }
}

3. 动画高级用法

3.1 自定义动画

val transition = updateTransition(targetState = isSelected)
val borderColor by transition.animateColor { state ->
    if (state) Color.Green else Color.White
}

3.2 AnimatedVisibility 扩展

AnimatedVisibility(
    visible = visible,
    enter = slideInHorizontally() + fadeIn(),
    exit = slideOutHorizontally() + fadeOut()
) {
    // 内容
}

3.3 手势动画

val offset = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) }
LaunchedEffect(offset) {
    offset.animateTo(targetValue, spring())
}

4. 高级状态管理

4.1 状态容器

class MyViewModel : ViewModel() {
    private val _state = mutableStateOf(MyState())
    val state: State<MyState> = _state
    
    fun update() {
        _state.value = _state.value.copy(...)
    }
}

4.2 状态恢复

@Composable
fun RememberSaveableExample() {
    var state by rememberSaveable { mutableStateOf(initialValue) }
}

5. 主题与样式

5.1 动态主题

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) DarkColors else LightColors
    MaterialTheme(colors = colors, content = content)
}

5.2 自定义形状和颜色

val MyShapes = Shapes(
    small = CutCornerShape(4.dp),
    medium = CutCornerShape(8.dp),
    large = CutCornerShape(0.dp)
)

6. 与 View 系统互操作

6.1 AndroidView 嵌入传统 View

AndroidView(
    factory = { context ->
        CustomView(context).apply {
            // 初始化
        }
    },
    update = { view ->
        // 更新逻辑
    }
)

6.2 ComposeView 嵌入 Compose 内容

val composeView = ComposeView(context).apply {
    setContent {
        MyComposableContent()
    }
}

7. 测试

7.1 UI 测试

composeTestRule.setContent {
    MyAppTheme {
        MyScreen()
    }
}

composeTestRule.onNodeWithText("Button").performClick()

7.2 状态测试

@Test
fun testState() {
    val viewModel = MyViewModel()
    assertEquals(expectedState, viewModel.state.value)
}

8. 高级图形绘制

8.1 Canvas 绘制

Canvas(modifier = Modifier.fillMaxSize()) {
    drawCircle(color = Color.Red, radius = 50f)
}

8.2 自定义绘制

@Composable
fun CustomDraw(modifier: Modifier = Modifier) {
    DrawModifier(modifier)
}

private class DrawModifier(val modifier: Modifier) : Modifier.Element {
    // 实现绘制逻辑
}

9. 高级交互

9.1 多点触控

var scale by remember { mutableStateOf(1f) }
Modifier.pointerInput(Unit) {
    detectTransformGestures { _, pan, zoom, _ ->
        scale *= zoom
    }
}

9.2 嵌套滚动

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            // 处理滚动
            return Offset.Zero
        }
    }
}

10. 组合模式与架构

10.1 组合式设计模式

• Slot API：通过 @Composable lambda 参数提供灵活性

@Composable
fun Card(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Surface(modifier) {
        content()
    }
}

10.2 分层架构

• UI 层：纯 Compose 组件
• 状态管理层：ViewModel/State Holder
• 业务逻辑层：Repository/Use Cases

这些高级技术可以帮助开发者构建更高效、更灵活的 Compose 应用，同时保持良好的架构和可维护性。