如何在自定义Modifier中获取Composable的尺寸？

你可以通过在composed内部使用onSizeChanged监听组件的实际渲染尺寸，结合remember保存尺寸状态，完全不需要手动传递尺寸参数。这样所有尺寸相关逻辑都封装在Modifier内部，调用方只需直接使用customAnim()即可。

修改后的完整代码 #

@Composable
fun CustomModifierDemo() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .customAnim() // 无需传递尺寸参数
            .background(Color.Red)
    )
}

fun Modifier.customAnim(): Modifier {
    return composed {
        // 保存组件的实际渲染尺寸，初始为0
        val componentSize = remember { mutableStateOf(IntSize.Zero) }
        val transition = rememberInfiniteTransition(label = "")
        
        // 基于组件宽度创建偏移动画
        val translateAnimation = transition.animateFloat(
            initialValue = 0F,
            // 使用组件实际宽度作为动画目标值
            targetValue = componentSize.value.width.toFloat(),
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 600,
                    easing = LinearEasing,
                ),
                repeatMode = RepeatMode.Reverse,
            ),
            label = "translate_animation"
        )

        this.then(
            Modifier
                // 监听组件尺寸变化，更新保存的尺寸状态
                .onSizeChanged { newSize ->
                    componentSize.value = newSize
                }
                // 使用动画值做偏移（直接用Px单位转dp）
                .offset(x = translateAnimation.value.toDp(), y = 0.dp)
        )
    }
}

关键说明 #

• 自动获取尺寸：onSizeChanged会在组件完成布局、实际尺寸确定后触发，把最新尺寸存入componentSize状态中。
• 动画适配尺寸变化：如果后续组件尺寸发生改变（比如响应式布局调整大小），componentSize会自动更新，动画的目标值也会同步变化，无需额外处理。
• 移除硬编码依赖：调用方不再需要手动计算或传递sizeInPx，所有尺寸逻辑都封装在customAnim内部，符合封装原则。

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