Jetpack Compose：为何Material组件默认返回State类型？

核心原因：减少无效重组 + 支持灵活的状态订阅 #

你改成返回普通Color后在简单场景下能正常工作，但这只是表象。返回State<Color>主要解决两个关键问题：

1. 避免父组件无意义的重组 #

当直接返回Color时，这个@Composable函数每次计算出新颜色，都会触发调用它的父组件整体重组。但返回State<Color>时，只有订阅这个State的UI元素（比如Text）会在颜色真正变化时重组，父组件不会因为内部状态（比如焦点变化）被迫刷新。

举个对比例子：

// 场景1：返回普通Color
@Composable
fun PlainColorPlaceholder(enabled: Boolean, isError: Boolean, interactionSource: InteractionSource) {
    val color = placeholderColorAsColor(enabled, isError, interactionSource)
    // 焦点变化时，整个PlainColorPlaceholder都会重组
    Text(text = "Placeholder", color = color)
}

// 场景2：返回State<Color>
@Composable
fun StateBasedPlaceholder(enabled: Boolean, isError: Boolean, interactionSource: InteractionSource) {
    val colorState = placeholderColorAsState(enabled, isError, interactionSource)
    // 只有colorState的值变化时，Text才会重组，StateBasedPlaceholder不会额外刷新
    Text(text = "Placeholder", color = colorState.value)
}

在场景1中，只要焦点切换，placeholderColorAsColor重新计算颜色，就会导致整个PlainColorPlaceholder组件重组；而场景2里，父组件不会因为焦点变化触发重组，只有颜色确实改变时，Text才会更新，性能更高效。

2. 适配非Composable场景的状态监听 #

有些场景下需要在非Composable代码中监听颜色变化（比如自定义动画、和传统View系统交互），State<Color>可以通过Compose的状态订阅机制实现，普通Color做不到这一点。

比如实现颜色过渡动画：

@Composable
fun AnimatedPlaceholder(enabled: Boolean, isError: Boolean, interactionSource: InteractionSource) {
    val colorState = placeholderColorAsState(enabled, isError, interactionSource)
    // animateColorAsState依赖State的订阅来自动触发动画
    val animatedColor by animateColorAsState(
        targetValue = colorState.value,
        animationSpec = tween(300)
    )
    Text(text = "Animated Placeholder", color = animatedColor)
}

如果用普通Color，虽然能传值，但动画触发依赖父组件重组，效率更低；而State<Color>能让动画系统精准监听颜色变化，自动启动过渡。

另外，在ViewModel或其他非Composable类中，还可以通过snapshotFlow将State<Color>转为Flow来订阅变化：

val colorFlow = snapshotFlow { colorState.value }
colorFlow.collect { newColor ->
    // 处理颜色变化，比如通知View系统更新UI
}

总结 #

返回State<Color>是Jetpack Compose中状态管理和性能优化的标准实践：

• 精准控制重组范围，减少不必要的UI刷新
• 支持动画、跨场景状态监听等更复杂的需求

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