Jetpack Compose中如何使用Modifier.contentSize实现内容尺寸动画？

核心本质：Modifier.contentSize 是用于读取组件内部实际渲染内容尺寸的观察类修饰符，区别于布局约束分配的组件整体尺寸，这也是它被推荐用于内容尺寸变化动画的核心原因。

基础用法 #

• 它不是直接设置组件尺寸的修饰符，作用是绑定观察回调，实时获取组件内部内容的测量值：

  var observedContentSize by remember { mutableStateOf(Size.Zero) }
  
  // 将修饰符绑定到需要追踪尺寸变化的内容容器上
  YourContentContainer(
    modifier = Modifier.contentSize { size ->
      observedContentSize = size
    }
  )
  

• 拿到真实的内容尺寸后，即可直接将其作为动画的目标值，避免硬编码固定尺寸带来的适配问题。典型场景是动态展开/折叠的内容块：

  var isExpanded by remember { mutableStateOf(false) }
  
  // 基于实际内容尺寸生成动画值
  val animatedContentSize by animateSizeAsState(
    targetValue = observedContentSize,
    animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
    label = "contentSizeAnimation"
  )
  
  Column(
    modifier = Modifier
      // 应用动画化的尺寸
      .size(animatedContentSize)
      // 追踪内部文本的实际渲染尺寸
      .contentSize { textRenderedSize ->
        // 自动同步文本展开/折叠后的真实尺寸作为动画目标
      }
  ) {
    Text(
      text = "很长很长的示例文本，这里省略数百字……",
      maxLines = if (isExpanded) Int.MAX_VALUE else 2
    )
  }
  

搭配内置动画能力使用 #

• 不需要手动写状态逻辑的场景，可直接搭配 animateContentSize 修饰符使用。这个内置动画修饰符的底层实现本身就依赖 contentSize 读取内容真实尺寸，自动完成尺寸补间动画：

  // 传入自定义动画规格，即可替换默认的动画效果
  Modifier.animateContentSize(
    animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
  )
  

• 这类场景适用的范围：
  • 内部内容动态加载，提前无法预知准确尺寸
  • 尺寸变化由组件内部逻辑触发（如图片加载完成、文本行数变化），外部无法提前获取精确的目标尺寸值

常见踩坑提示 #

• 不要和 onSizeChanged 混淆：onSizeChanged 读取的是父布局分配给组件的整体布局尺寸，和内容实际渲染尺寸存在差异（比如组件加了内边距、做了滚动裁切时，两者数值不相等）
• 不要在绑定了固定 Modifier.size() 的组件上单独使用 contentSize：固定尺寸的约束会截断内容测量，导致拿到的尺寸值是约束截断后的结果，和真实内容尺寸不符
• contentSize 的回调在组件测量阶段执行，回调内不要做耗时计算，避免触发主线程掉帧

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