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> = _statefun 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 LightColorsMaterialTheme(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 應用，同時保持良好的架構和可維護性。