Android篇: Jetpack Compose 入门基础和进阶用法

Jetpack Compose 是 Android 的现代 UI 工具包，它采用声明式编程方式构建用户界面，让 Android 开发变得更加高效和简洁。如果你还不熟悉 Jetpack Compose，下面是一个全面的教程，帮助你入门并掌握它的基础和进阶用法。

1. Jetpack Compose 基础概念

在 Jetpack Compose 中，UI 是通过 @Composable 注解的函数来声明的。Compose 采用声明式的 UI 编程范式，意味着你只需要描述界面应该是什么样的，Compose 会负责显示和更新界面。

核心概念

• @Composable：标记一个函数是一个 UI 组件。任何 UI 组件都可以作为 Composable 函数。
• Recomposition：当状态变化时，Compose 会自动重新计算并更新相应的 UI 部分。
• State：Compose 使用 state 来管理 UI 的动态变化。remember 和 mutableStateOf 用于创建和存储状态。
• Layout：Compose 提供了类似 Row、Column 和 Box 等布局组件，用来排列和管理其他 UI 组件。

2. 环境搭建

首先，确保你的开发环境准备好，支持 Jetpack Compose。

2.1. 更新 Gradle 配置

确保你的项目使用支持 Jetpack Compose 的 Android Studio（如 2020.3 或更高版本），并配置相关的 Gradle 文件。

1. 根 build.gradle 文件：

buildscript {
    ext {
        compose_version = '1.0.0' // 使用最新的 Compose 版本
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.0.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.21"
    }
}

1. 模块 build.gradle 文件：

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 30
    defaultConfig {
        applicationId "com.example.composeapp"
        minSdk 21
        targetSdk 30
    }
    
    buildFeatures {
        compose true // 启用 Compose
    }
    
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion "1.5.21"
    }

    dependencies {
        implementation "androidx.compose.ui:ui:$compose_version"
        implementation "androidx.compose.material:material:$compose_version"
        implementation "androidx.compose.ui:ui-tooling:$compose_version" // 用于预览和调试
        implementation "androidx.activity:activity-compose:1.3.0"
    }
}

1. 同步项目：完成这些修改后，点击 Android Studio 中的 "Sync Now" 按钮，确保项目同步成功。

3. 第一个 Compose 应用

创建一个简单的 Compose 应用，包含一个文本和按钮，点击按钮时文本会改变。

3.1. 创建 Composable 函数

在 MainActivity 中，使用 setContent 函数来设置 Compose UI 内容。setContent 允许你在一个 Activity 中设置 Compose UI。

package com.example.composeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 调用我们定义的 Composable 函数来显示 UI
            GreetingApp()
        }
    }
}

@Composable
fun GreetingApp() {
    // 使用 remember 和 mutableStateOf 来保存 UI 状态
    val counter = remember { mutableStateOf(0) }

    Column() {
        Text(
            text = "Hello, Jetpack Compose!",
            fontSize = 24.sp
        )
        Button(onClick = { counter.value++ }) {
            Text("Click me!")
        }
        Text(text = "You've clicked the button ${counter.value} times")
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    GreetingApp()
}

3.2. 代码解析

• @Composable：这是一个标记函数，告诉 Compose 这是一个 UI 组件。UI 是由这些函数组成的。
• setContent {}：在 Activity 的 onCreate 方法中，setContent 设置 Compose 视图为当前的 UI。
• remember { mutableStateOf() }：这是用于声明 UI 状态的方式。它会在界面重新组合时保留状态。mutableStateOf 用来声明一个可变状态，remember 确保它在重组时保持不变。
• Column：Compose 提供了布局组件，如 Column、Row 和 Box。这里，Column 用来垂直排列子组件。
• @Preview：用于在 Android Studio 中预览 Compose UI 的效果。

4. 布局组件

Jetpack Compose 提供了多种布局组件来控制 UI 元素的排列方式。

4.1. Column 和 Row

• Column：用于垂直排列子视图。
• Row：用于水平排列子视图。

@Composable
fun SimpleLayout() {
    Column() {
        Text("Hello")
        Text("World")
    }
}

@Composable
fun RowLayout() {
    Row() {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

4.2. Box

Box 允许你将子元素叠加在一起，常用于实现图层效果。

@Composable
fun BoxLayout() {
    Box {
        Text("First item")
        Text("Second item")
    }
}

4.3. Spacer

Spacer 用于插入空白空间，以控制布局中的间距。

@Composable
fun SpacerLayout() {
    Column() {
        Text("Item 1")
        Spacer(modifier = Modifier.height(16.dp))  // 空白空间
        Text("Item 2")
    }
}

5. 事件处理

在 Compose 中，你可以使用不同的事件处理方法来响应用户交互，如点击按钮、输入文本等。

5.1. 按钮点击事件

@Composable
fun ClickableButton() {
    val count = remember { mutableStateOf(0) }
    
    Button(onClick = { count.value++ }) {
        Text("Click me! Count: ${count.value}")
    }
}

5.2. 文本输入框

TextField 用于获取用户输入。你可以通过 remember 和 mutableStateOf 来管理输入框的文本状态。

@Composable
fun TextInput() {
    val text = remember { mutableStateOf("") }
    
    TextField(
        value = text.value,
        onValueChange = { text.value = it },
        label = { Text("Enter text") }
    )
    
    Text("You typed: ${text.value}")
}

6. 状态管理和生命周期

在 Jetpack Compose 中，状态管理是核心部分之一。remember 和 mutableStateOf 允许你声明和存储 UI 状态，确保 UI 在重组时能够正确保持其状态。

6.1. 使用 remember 和 mutableStateOf

val counter = remember { mutableStateOf(0) }

Button(onClick = { counter.value++ }) {
    Text("Clicked ${counter.value} times")
}

6.2. LaunchedEffect 和 rememberCoroutineScope

LaunchedEffect 用于执行异步任务（如网络请求、延时等）。rememberCoroutineScope 用于启动协程。

@Composable
fun LoadData() {
    val scope = rememberCoroutineScope()
    var data by remember { mutableStateOf("Loading...") }
    
    LaunchedEffect(true) {
        // 模拟数据加载
        delay(2000)
        data = "Data loaded"
    }

    Text(text = data)
}

7. 自定义组件

Jetpack Compose 允许你通过组合多个 UI 组件来创建自定义的 UI 元素。例如，创建一个简单的卡片组件：

@Composable
fun CustomCard() {
    Card(
        modifier = Modifier.padding(16.dp),
        elevation = 4.dp
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Title", style = MaterialTheme.typography.h6)
            Spacer(modifier = Modifier.height(8.dp))
            Text("Description of the card content.")
        }
    }
}

8. 预览和调试

Jetpack Compose 提供了非常强大的预览功能。在 Android Studio 中，你可以使用 @Preview 来查看不同的 UI 组件效果。