3. 状态管理入门

任务说明

本案例将使用 Jetpack Compose 构建一个计数器应用：界面显示当前数字，点击“增加”按钮后数字递增。核心目标是掌握 Compose 中最基础的状态管理方式——remember 与 mutableStateOf 的配合使用，理解状态变化如何驱动界面重组。

核心实现

在 Compose 中，mutableStateOf 用于创建可观察的状态容器，remember 则保证该状态在重组过程中被保留。当状态值改变时，Compose 会自动重新执行读取该状态的 composable 函数，从而更新界面。

<code>// MainActivity.kt
package com.example.counter

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    CounterApp()
                }
            }
        }
    }
}

@Composable
fun CounterApp() {
    // 使用 remember 保存状态，mutableStateOf 创建可观察的 Int 状态
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "当前计数：$count",
            fontSize = 32.sp
        )
        Button(
            onClick = { count++ },
            modifier = Modifier.padding(top = 16.dp)
        ) {
            Text("增加", fontSize = 20.sp)
        }
    }
}

关键代码说明

• var count by remember { mutableStateOf(0) }：mutableStateOf(0) 创建初始值为 0 的状态对象；remember 确保重组时状态不丢失；by 委托语法允许直接读写 count，等价于 count = countState.value。
• count++：修改状态值，触发依赖该状态的 Text 重组，界面数字自动更新。
• 界面采用 Column 垂直居中布局，上方显示数字，下方为按钮。

状态流转示意

运行与验证

运行方式：在 Android Studio 中新建项目，选择“Empty Activity”模板，将上述代码完整替换 MainActivity.kt 的内容，确保 build.gradle.kts（模块级）中包含 Compose 相关依赖（BOM、UI、Material3 等），然后点击 Run 启动应用。

验证步骤与判定标准：

1. 应用启动后，屏幕中央显示“当前计数：0”和“增加”按钮。
2. 每次点击“增加”按钮，数字立即加 1，界面无闪烁或卡顿。
3. 旋转设备（或触发配置变更）后，计数归零——这是 remember 不跨配置变更保留状态的预期表现，用于验证状态确实由 remember 管理。
4. 连续点击 10 次，最终显示“当前计数：10”，证明状态递增逻辑正确。

以上步骤全部满足，即表示本案例实现成功。