Jetpack Compose中如何实现超出Box范围的按钮放大动画？

当然可以实现！不用额外预留空间，只需要从布局层面允许内容溢出即可，步骤如下：

• 给外层Box设置clipToBounds = false：Compose的Box默认会裁剪超出自身边界的内容，关闭这个参数后，内部元素就能突破Box的范围显示。
• 直接使用目标基础尺寸（比如20.dp）定义按钮，点击时通过动画API直接放大尺寸，不用额外加预留空间。

示例代码 #

import androidx.compose.animation.core.animateSizeAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// 调用示例
fun OverflowButtonDemo() {
    var isClicked by remember { mutableStateOf(false) }
    // 动画控制按钮尺寸：点击时从20dp放大到22dp
    val buttonSize by animateSizeAsState(
        targetValue = if (isClicked) 22.dp.toSize() else 20.dp.toSize(),
        animationSpec = tween(durationMillis = 300)
    )

    Box(
        modifier = Modifier.size(20.dp).background(Color.LightGray),
        clipToBounds = false // 关键配置：允许内部内容溢出Box边界
    ) {
        Button(
            onClick = { isClicked = !isClicked },
            modifier = Modifier.size(buttonSize),
            content = {}
        )
    }
}

说明 #

这个方案比自定义Shape的方式更简洁：不需要为了动画提前放大按钮的基础尺寸，而是让Box放开裁剪限制，让按钮动画自然超出边界。点击按钮时，按钮会平滑从20dp放大到22dp，完全突破外层Box的范围显示。

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