Jetpack Compose中animateDpAsState动画不生效问题求助

我正在观看Jetpack Compose基础教程，但复制教程中的代码后，animateDpAsState动画完全不生效。界面仅显示文本和按钮，点击按钮时无任何动画效果，即使删除animateDpAsState相关代码也没有变化。我了解到一些关于副作用的内容，但无法理解，且该问题在教程评论区也无人提及。我尝试修改动画设置仍未解决，作为Jetpack Compose新手，希望得到解决方法。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicsCodelabTheme {
                MyApp(modifier = Modifier.fillMaxSize())
            }
        }
    }
}

@Composable
fun MyApp(modifier: Modifier = Modifier) {

    var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

    Surface(modifier) {
        if (shouldShowOnboarding) {
            OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
        } else {
            Greetings()
        }
    }
}

@Composable
fun OnboardingScreen(
    onContinueClicked: () -> Unit,
    modifier: Modifier = Modifier
) {

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome to the Basics Codelab!")
        Button(
            modifier = Modifier.padding(vertical = 24.dp),
            onClick = onContinueClicked
        ) {
            Text("Continue")
        }
    }

}

@Composable
private fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = List(1000) { "$it" }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
    BasicsCodelabTheme {
        OnboardingScreen(onContinueClicked = {})
    }
}

@Composable
private fun Greeting(name: String) {

    var expanded by remember { mutableStateOf(false) }

    val extraPadding:Dp by animateDpAsState(targetValue =
        if (expanded) 48.dp else 0.dp,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )
    fun change(){

    }

    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier
                .weight(1f)
                .padding(bottom = extraPadding)
            ) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded = !expanded }
            ) {
                Text(if (expanded) "Show less" else "Show more")
            }
        }
    }
}

@Preview(showBackground = true, widthDp = 320)
@Composable
fun DefaultPreview() {
    BasicsCodelabTheme {
        Greetings()
    }
}

@Preview
@Composable
fun MyAppPreview() {
    BasicsCodelabTheme {
        MyApp(Modifier.fillMaxSize())
    }
}

1. 确认操作流程正确 #

你代码中的animateDpAsState动画仅在Greeting组件中生效，而Greeting组件属于Greetings列表页面，默认启动后显示的是Onboarding引导页。正确操作步骤：

• 打开APP后，先点击引导页的「Continue」按钮，进入Greetings列表页面
• 找到任意一个条目，点击右侧的「Show more」按钮，此时会看到文本区域底部padding带动画变化，Surface组件高度也会随之改变

2. 排查动画不生效的潜在问题 #

如果按上述步骤操作后仍无动画，检查以下几点：

• 验证动画依赖是否添加：在app模块的build.gradle.kts（或build.gradle）中，确保包含Compose动画依赖：

  implementation("androidx.compose.animation:animation:1.6.0") // 版本号需与你的Compose版本匹配
  

• 确认状态切换触发重组：可以给按钮点击事件添加日志，验证expanded状态是否正常切换：

  ElevatedButton(
      onClick = { 
          expanded = !expanded 
          Log.d("Greeting", "expanded状态: $expanded")
      }
  )
  

  若日志能正常打印，说明状态切换正常，动画逻辑本身无问题。
• 放大动画效果便于观察：当前extraPadding设置为48.dp，若视觉变化不明显，可以尝试增大数值（比如改为80.dp），更容易观察动画效果。

3. 关于「删除动画代码无变化」的说明 #

删除animateDpAsState后，extraPadding会瞬间在0.dp和48.dp之间切换，这种瞬间变化可能因Row本身的24.dp padding而被掩盖，导致视觉上看不出差异，属于正常现象。

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