Jetpack Compose 声明式 UI 入门指南

1
@Composable
2
fun LazyColumnExample(items: List<String>) {
3
    LazyColumn(
4
        modifier = Modifier.fillMaxSize(),
5
        contentPadding = PaddingValues(16.dp),
6
        verticalArrangement = Arrangement.spacedBy(8.dp)
7
    ) {
8
        // 固定头部
9
        item {
10
            Text("列表标题", fontSize = 20.sp, fontWeight = FontWeight.Bold)
11
        }
12

13
        // 列表项
14
        items(items) { item ->
15
            Card(
16
                modifier = Modifier.fillMaxWidth(),
17
                elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
18
            ) {
19
                Text(
20
                    text = item,
21
                    modifier = Modifier.padding(16.dp)
22
                )
23
            }
24
        }
25

26
        // 按索引
27
        itemsIndexed(items) { index, item ->
28
            Text("$index: $item")
29
        }
30

31
        // 固定尾部
32
        item {
33
            Text("共 ${items.size} 项", color = Color.Gray)
34
        }
35
    }
36
}

1
@Composable
2
fun AppNavigation() {
3
    val navController = rememberNavController()
4

5
    NavHost(
6
        navController = navController,
7
        startDestination = "home"
8
    ) {
9
        composable("home") {
10
            HomeScreen(
11
                onNavigateToDetail = { id ->
12
                    navController.navigate("detail/$id")
13
                }
14
            )
15
        }
16
        composable(
17
            route = "detail/{id}",
18
            arguments = listOf(navArgument("id") { type = NavType.IntType })
19
        ) { backStackEntry ->
20
            val id = backStackEntry.arguments?.getInt("id") ?: 0
21
            DetailScreen(id = id, onBack = { navController.popBackStack() })
22
        }
23
    }
24
}

1
// 数据模型
2
data class Todo(
3
    val id: Int = 0,
4
    val text: String,
5
    val isDone: Boolean = false
6
)
7

8
// 主界面
9
@Composable
10
fun TodoScreen() {
11
    var todos by remember { mutableStateOf(listOf<Todo>()) }
12
    var inputText by remember { mutableStateOf("") }
13
    var nextId by remember { mutableStateOf(1) }
14

15
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
16
        // 标题
17
        Text(
18
            text = "待办事项",
19
            style = MaterialTheme.typography.headlineMedium,
20
            modifier = Modifier.padding(bottom = 16.dp)
21
        )
22

23
        // 输入区域
24
        Row(
25
            modifier = Modifier.fillMaxWidth(),
26
            verticalAlignment = Alignment.CenterVertically
27
        ) {
28
            OutlinedTextField(
29
                value = inputText,
30
                onValueChange = { inputText = it },
31
                label = { Text("新任务") },
32
                modifier = Modifier.weight(1f),
33
                singleLine = true
34
            )
35
            Spacer(Modifier.width(8.dp))
36
            Button(
37
                onClick = {
38
                    if (inputText.isNotBlank()) {
39
                        todos = todos + Todo(id = nextId++, text = inputText)
40
                        inputText = ""
41
                    }
42
                }
43
            ) {
44
                Text("添加")
45
            }
46
        }
47

48
        Spacer(Modifier.height(16.dp))
49

50
        // 列表
51
        LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
52
            items(todos, key = { it.id }) { todo ->
53
                TodoItem(
54
                    todo = todo,
55
                    onToggle = {
56
                        todos = todos.map {
57
                            if (it.id == todo.id) it.copy(isDone = !it.isDone) else it
58
                        }
59
                    },
60
                    onDelete = {
61
                        todos = todos.filter { it.id != todo.id }
62
                    }
63
                )
64
            }
65
        }
66
    }
67
}
68

69
// 单条任务
70
@Composable
71
fun TodoItem(
72
    todo: Todo,
73
    onToggle: () -> Unit,
74
    onDelete: () -> Unit
75
) {
76
    Card(
77
        modifier = Modifier.fillMaxWidth(),
78
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
79
    ) {
80
        Row(
81
            modifier = Modifier
82
                .fillMaxWidth()
83
                .padding(12.dp),
84
            verticalAlignment = Alignment.CenterVertically
85
        ) {
86
            Checkbox(checked = todo.isDone, onCheckedChange = { onToggle() })
87
            Text(
88
                text = todo.text,
89
                modifier = Modifier
90
                    .weight(1f)
91
                    .padding(horizontal = 8.dp),
92
                style = MaterialTheme.typography.bodyLarge,
93
                textDecoration = if (todo.isDone) TextDecoration.LineThrough else null
94
            )
95
            IconButton(onClick = onDelete) {
96
                Icon(Icons.Default.Delete, contentDescription = "删除", tint = Color.Red)
97
            }
98
        }
99
    }
100
}