kotlin-compose

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Kotlin Compose Skill

Kotlin Compose 技能

Build modern UIs with Jetpack Compose declarative patterns.

使用Jetpack Compose的声明式模式构建现代UI。

Topics Covered

涵盖主题

State Management

状态管理

kotlin

@Composable
fun Counter() {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) { Text("Count: $count") }
}

// Derived state
val isValid by remember { derivedStateOf { email.isNotBlank() && password.length >= 8 } }

kotlin

@Composable
fun Counter() {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) { Text("Count: $count") }
}

// 派生状态
val isValid by remember { derivedStateOf { email.isNotBlank() && password.length >= 8 } }

Side Effects

副作用

kotlin

@Composable
fun UserScreen(userId: String) {
    LaunchedEffect(userId) {
        viewModel.loadUser(userId)
    }

    DisposableEffect(Unit) {
        val listener = viewModel.addListener()
        onDispose { listener.remove() }
    }
}

kotlin

@Composable
fun UserScreen(userId: String) {
    LaunchedEffect(userId) {
        viewModel.loadUser(userId)
    }

    DisposableEffect(Unit) {
        val listener = viewModel.addListener()
        onDispose { listener.remove() }
    }
}

Modifiers

修饰符

kotlin

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        .background(MaterialTheme.colorScheme.surface)
        .clickable { onClick() }
)

kotlin

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        .background(MaterialTheme.colorScheme.surface)
        .clickable { onClick() }
)

Material 3 Theming

Material 3 主题设置

kotlin

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)
}

kotlin

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)
}

Troubleshooting

问题排查

Issue	Resolution
Infinite recomposition	Use remember or derivedStateOf
State lost on rotation	Use rememberSaveable or ViewModel

问题	解决方法
无限重组	使用remember或derivedStateOf
旋转时状态丢失	使用rememberSaveable或ViewModel

Usage

使用方法

Skill("kotlin-compose")

Skill("kotlin-compose")