Jetpack Compose #

一、Compose概述 #

Jetpack Compose是Android的现代声明式UI框架，使用Kotlin代码构建UI，简化了Android UI开发。

1.1 Compose特点 #

声明式UI
Kotlin代码构建
实时预览
兼容现有代码

1.2 添加依赖 #

kotlin

dependencies {
    implementation("androidx.compose.ui:ui:1.5.4")
    implementation("androidx.compose.ui:ui-tooling-preview:1.5.4")
    implementation("androidx.compose.material3:material3:1.1.2")
    implementation("androidx.activity:activity-compose:1.8.2")
    
    debugImplementation("androidx.compose.ui:ui-tooling:1.5.4")
}

二、基础组件 #

2.1 Text #

kotlin

Text(
    text = "Hello, Compose!",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue,
    modifier = Modifier.padding(16.dp)
)

2.2 Button #

kotlin

Button(
    onClick = { /* 点击事件 */ },
    modifier = Modifier.padding(16.dp)
) {
    Text("Click Me")
}

2.3 Image #

kotlin

Image(
    painter = painterResource(id = R.drawable.image),
    contentDescription = "Image",
    modifier = Modifier.size(100.dp)
)

2.4 TextField #

kotlin

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Enter text") },
    modifier = Modifier.fillMaxWidth()
)

三、布局组件 #

3.1 Column #

kotlin

Column(
    modifier = Modifier.padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

3.2 Row #

kotlin

Row(
    modifier = Modifier.padding(16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("A")
    Text("B")
    Text("C")
}

3.3 Box #

kotlin

Box(
    modifier = Modifier.size(200.dp)
) {
    Image(
        painter = painterResource(id = R.drawable.background),
        contentDescription = null,
        modifier = Modifier.fillMaxSize()
    )
    Text(
        text = "Overlay",
        modifier = Modifier.align(Alignment.BottomCenter)
    )
}

3.4 LazyColumn #

kotlin

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp)
) {
    items(100) { index ->
        Text("Item $index")
    }
    
    items(users) { user ->
        UserItem(user)
    }
}

四、状态管理 #

4.1 remember #

kotlin

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

4.2 rememberSaveable #

kotlin

@Composable
fun Counter() {
    var count by rememberSaveable { mutableStateOf(0) }
    // 配置更改时保留状态
}

4.3 ViewModel #

kotlin

class MainViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()
    
    fun increment() {
        _count.value++
    }
}

@Composable
fun MainScreen(viewModel: MainViewModel = viewModel()) {
    val count by viewModel.count.collectAsState()
    
    Column {
        Text("Count: $count")
        Button(onClick = { viewModel.increment() }) {
            Text("Increment")
        }
    }
}

五、Modifier #

5.1 常用Modifier #

kotlin

Text(
    text = "Hello",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Blue)
        .fillMaxWidth()
        .height(100.dp)
        .clickable { /* 点击事件 */ }
)

5.2 自定义Modifier #

kotlin

fun Modifier.shimmer(): Modifier = composed {
    var size by remember { mutableStateOf(IntSize.Zero) }
    
    background(
        brush = Brush.linearGradient(
            colors = listOf(
                Color.LightGray,
                Color.White,
                Color.LightGray
            )
        )
    )
    .onGloballyPositioned { size = it.size }
}

六、主题 #

6.1 MaterialTheme #

kotlin

@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC5)
        ),
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) {
        MainScreen()
    }
}

6.2 暗黑模式 #

kotlin

@Composable
fun MyApp() {
    val darkTheme = isSystemInDarkTheme()
    
    MaterialTheme(
        colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme()
    ) {
        MainScreen()
    }
}

七、动画 #

7.1 AnimatedVisibility #

kotlin

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(visible = visible) {
    Text("Hello")
}

Button(onClick = { visible = !visible }) {
    Text("Toggle")
}

7.2 animateContentSize #

kotlin

var expanded by remember { mutableStateOf(false) }

Column(
    modifier = Modifier.animateContentSize()
) {
    Text(
        text = if (expanded) "Long text..." else "Short",
        maxLines = if (expanded) Int.MAX_VALUE else 1
    )
}

7.3 animateAsState #

kotlin

var isSelected by remember { mutableStateOf(false) }

val backgroundColor by animateColorAsState(
    targetValue = if (isSelected) Color.Blue else Color.Gray,
    animationSpec = tween(durationMillis = 300)
)

Box(
    modifier = Modifier
        .background(backgroundColor)
        .clickable { isSelected = !isSelected }
)

八、导航 #

8.1 添加依赖 #

kotlin

implementation("androidx.navigation:navigation-compose:2.7.6")

8.2 导航设置 #

kotlin

@Composable
fun MyApp() {
    val navController = rememberNavController()
    
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(
                onNavigate = { navController.navigate("detail") }
            )
        }
        composable("detail") {
            DetailScreen(
                onBack = { navController.popBackStack() }
            )
        }
    }
}

8.3 传递参数 #

kotlin

NavHost(navController, startDestination = "home") {
    composable(
        "detail/{itemId}",
        arguments = listOf(navArgument("itemId") { type = NavType.StringType })
    ) { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailScreen(itemId)
    }
}

// 导航
navController.navigate("detail/123")

九、最佳实践 #

9.1 组件拆分 #

kotlin

@Composable
fun UserScreen(user: User) {
    Column {
        UserHeader(user)
        UserContent(user)
        UserFooter(user)
    }
}

@Composable
fun UserHeader(user: User) {
    Row {
        UserAvatar(user.avatar)
        UserName(user.name)
    }
}

9.2 状态提升 #

kotlin

@Composable
fun SearchBar(
    query: String,
    onQueryChange: (String) -> Unit
) {
    TextField(
        value = query,
        onValueChange = onQueryChange
    )
}

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    
    Column {
        SearchBar(query) { query = it }
        SearchResult(query)
    }
}

十、总结 #

本章介绍了Jetpack Compose：

Compose的基本概念
基础组件
布局组件
状态管理
Modifier
主题配置
动画效果
导航
最佳实践

Jetpack Compose是Android UI的未来，掌握它可以大大提高开发效率。