Compose 样式系统，告别 Modifier 地狱？

作为一名资深的 Android 开发者，你是否曾经在面对复杂的交互样式时感到头疼？是否曾经为了一点小小的样式变化而不得不写一大堆样板代码？Ru果你有过这样的经历，那么你一定会对 Compose 的 Style API 感兴趣。

在传统的 Compose 开发中，我们经常会使用 Modifier 来定义组件的样式和行为。然而当涉及到复杂的交互样式时Modifier 就会变得非常繁琐。例如实现一个简单的悬停变色按钮，就需要手动创建 InteractionSource，收集状态变化，然后使用 animateColorAsState 来实现动画效果。

@Composable
fun InteractiveButton -> Unit) {
    val interactionSource = remember { MutableInteractionSource }
    val isPressed by interactionSource.collectIsPressedAsState
    val isHovered by interactionSource.collectIsHoveredAsState
    val bgColor by animateColorAsState(
        targetValue = when {
            isPressed -> Color.Red
            isHovered -> Color.Yellow
            else -> Color.Green
        }
    )
    Box(
        modifier = Modifier
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { onClick }
            .background
            .size
    )
}

数一下光是为了实现"按下变红、悬停变黄"，你就需要写这么多代码。这还只是Zui简单的情况，Ru果再加上 focus、selected、disabled 等状态，代码量就会指数级膨胀。

Google 终于坐不住了——Compose Foundation 里悄悄加了一套全新的 Style API，用声明式的方式干掉这些样板代码。Style API 的核心价值在于把交互状态和视觉表现的映射关系从命令式的"怎么Zuo"变成了声明式的"是什么"。

style = {
    background
    size
    hovered {
        animate {
            background
            scale
        }
    }
    pressed {
        // Ke以自定义动画参数
        animate) {
            background
            scale
        }
    }
}

内部通过 StyleAnimations 类管理所有动画实例，大大简化了动画的实现。同时Style API 还提供了双节点 Modifier 架构，只使用两个节点就实现了以前需要多个节点才Neng完成的功Neng。

Style API 的设计围绕三个核心接口展开：StyleStyleScope 和 StyleState。Style 是一个函数式接口，Ke以用 lambda 创建；StyleScope 提供了四大类属性设置方法；StyleState 则定义了六种交互状态，开箱即用。

sealed interface StyleState {
    val isEnabled: Boolean
    val isFocused: Boolean
    val isHovered: Boolean
    val isPressed: Boolean
    val isSelected: Boolean
    val isChecked: Boolean
}

把上面的知识点串起来kan一个贴近真实业务的例子：

@Composable
fun StyledCard(
    title: String,
    onClick:  -> Unit,
    modifier: Modifier = Modifier
) {
    val cardStyle = Style {
        background
        shape)
        contentPadding
        dropShadow)
        hovered {
            animate) {
                dropShadow)
                translationY.dp)
            }
        }
        pressed {
            animate) {
                dropShadow)
                scale
            }
        }
        focused {
            borderWidth
            borderColor
        }
    }
    ClickableStyleableBox(
        onClick = onClick,
        modifier = modifier,
        style = cardStyle
    ) {
        Text
    }
}

悬停时阴影变大、微微上浮；按下时阴影缩小、轻微缩放；聚焦时显示主题色边框。这些效果放在传统 Modifier 里写，代码量至少翻三倍。

回顾 Compose 的演进路线，从Zui初的 Modifier.clickable 到 InteractionSource，再到现在的 Style API，每一步dou在让"交互样式"这件事变得geng简单、geng声明式。Style API 目前标记为 @ExperimentalFoundationStyleApi，还在积极开发中，但其核心结构Yi经比较稳定。

你平时写 Compose 交互样式Zui头疼的是什么？欢迎评论区聊聊。

希望这篇文章符合您的要求！