解决Android Jetpack Compose中@Composable调用上下文错误

你遇到的问题主要有两个：

1. 在onClick回调中直接访问MaterialTheme.colorScheme：onClick不是Composable函数，无法获取Compose的环境变量（如MaterialTheme），直接访问会报错。
2. 主题配置不匹配：若你的ComposeTheme未使用Material3的主题结构，MaterialTheme.colorScheme属性会无法被识别。

步骤1：修复主题配置 #

确保你的主题文件（通常位于ui.theme/Theme.kt）使用Material3的规范：

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

// 定义深色/浅色配色方案
private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40
)

@Composable
fun ComposeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

步骤2：修改Greeting函数 #

在Composable范围内提前获取主题颜色，避免在onClick中直接访问MaterialTheme：

@Composable
fun Greeting(name: String) {
    // 在Composable环境中提前获取主题颜色
    val primaryColor = MaterialTheme.colorScheme.primary
    val secondaryColor = MaterialTheme.colorScheme.secondary

    var buttonColor by remember {
        mutableStateOf(primaryColor)
    }

    Surface(
        color = buttonColor,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello")
                Text(text = name)
            }
            ElevatedButton(onClick = {
                // 使用提前获取的颜色值
                buttonColor = secondaryColor
            }) {
                Text(text = "Show more")
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者PurpleRabbit