Jetpack Compose：如何在ViewModel中引用颜色资源并供Composable使用？

核心结论 #

不能在ViewModel中直接调用colorResource，因为这个函数带有@Composable注解，依赖Compose的CompositionLocal上下文，而ViewModel不属于Composable层级，因此会触发报错。

推荐解决方案 #

方案1：ViewModel暴露资源ID，Composable中解析颜色 #

这是最符合MVVM架构分离原则的方式——ViewModel只负责判断逻辑，返回颜色资源的ID，由Composable层负责将ID转换为Color对象。

ViewModel代码：

class MyViewModel : ViewModel() {
    // 假设uiState是你的状态流，这里用StateFlow示例
    private val _uiState = MutableStateFlow(UiState(redGradient = false))
    val uiState = _uiState.asStateFlow()

    // 暴露颜色资源ID的流
    val backgroundColorResIds = uiState.map { state ->
        if (state.redGradient) {
            listOf(R.color.customLightRed, R.color.customPink)
        } else {
            listOf(R.color.customBlue, R.color.customGreen)
        }
    }.stateIn(
        scope = viewModelScope,
        started = WhileUiSubscribed,
        initialValue = listOf(R.color.customBlue, R.color.customGreen)
    )
}

Composable代码：

@Composable
fun GradientScreen(viewModel: MyViewModel = viewModel()) {
    val colorResIds = viewModel.backgroundColorResIds.collectAsState()
    // 在Composable中转换资源ID为Color
    val backgroundColors = colorResIds.value.map { colorResource(it) }

    // 使用backgroundColors构建渐变背景
    Box(
        modifier = Modifier.background(
            brush = Brush.verticalGradient(backgroundColors)
        )
    ) {
        // 页面内容
    }
}

方案2：通过Resources在ViewModel中解析颜色（谨慎使用） #

如果确实需要在ViewModel中直接生成Color对象，可以通过传入Resources（而非Activity/Fragment级别的Context）来解析，避免内存泄漏，推荐使用Application级别的Resources。

ViewModel代码：

class MyViewModel(
    private val resources: Resources
) : ViewModel() {
    private val _backgroundColors = MutableStateFlow<List<Color>>(emptyList())
    val backgroundColors = _backgroundColors.asStateFlow()

    init {
        viewModelScope.launch {
            uiState.collect { state ->
                val colors = if (state.redGradient) {
                    listOf(
                        Color(ContextCompat.getColor(resources, R.color.customLightRed)),
                        Color(ContextCompat.getColor(resources, R.color.customPink))
                    )
                } else {
                    listOf(
                        Color(ContextCompat.getColor(resources, R.color.customBlue)),
                        Color(ContextCompat.getColor(resources, R.color.customGreen))
                    )
                }
                _backgroundColors.value = colors
            }
        }
    }
}

注入Resources（以Hilt为例）：
如果用Hilt依赖注入，可以直接在ViewModel构造函数中注入Resources：

@HiltViewModel
class MyViewModel @Inject constructor(
    private val resources: Resources
) : ViewModel() {
    // ...
}

Composable代码：

@Composable
fun GradientScreen(viewModel: MyViewModel = hiltViewModel()) {
    val colors = viewModel.backgroundColors.collectAsState()

    Box(
        modifier = Modifier.background(
            brush = Brush.verticalGradient(colors.value)
        )
    ) {
        // 页面内容
    }
}

架构原则说明 #

ViewModel的核心职责是处理业务逻辑、管理UI状态，应该与UI层（Composable）解耦。直接在ViewModel中处理颜色资源会导致：

• 依赖Android上下文，增加测试难度（需要模拟Resources）
• 违反关注点分离，ViewModel不应负责UI资源的解析

因此方案1是首选，既保持了ViewModel的纯净性，又让Composable层专注于UI渲染相关的工作。

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