Android Compose中ModalBottomSheetLayout在内容尺寸变化时出现跳动问题

问题描述 #

你遇到的这个问题我也碰到过：当ModalBottomSheet处于展开状态时，内部内容（比如Text组件）从多行高文本切换为单行短文本时，会出现组件底部先向上跳动、随后整个组件回落至正确位置的异常。这和传统View体系中animateLayoutChanges启用时的类似问题一致，但Compose里没有直接对应的animateLayoutChanges="false"配置项。

原因分析 #

这个异常的根源是ModalBottomSheetLayout内部默认启用了布局过渡动画，当内容高度骤减时，动画系统会先尝试调整组件的底部位置，再重新计算整个BottomSheet的布局，从而产生了视觉上的跳动。

解决方案 #

在Compose中，我们可以通过两种方式禁用这种不必要的布局动画，达到和传统View中animateLayoutChanges="false"相同的效果：

方案1：给目标组件添加animateContentSize并使用snap动画 #

给变化的Text组件添加animateContentSize修饰符，并指定animationSpec = snap()——这会让组件的尺寸变化瞬间完成，没有过渡动画，避免跳动：

ModalBottomSheetLayout(
    sheetContent = {
        var text by remember{ mutableStateOf("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum")}
        Text(
            text = text,
            Modifier
                .clickable { text = "a much shorter line of text" }
                .animateContentSize(animationSpec = snap())
        )
    },
    sheetShape = RoundedCornerShape(12.dp),
) {
    // 主内容区域
}

方案2：给BottomSheet内容全局设置无动画布局策略 #

如果BottomSheet内有多个组件可能发生尺寸变化，可以在整个sheetContent外层使用CompositionLocalProvider，将LocalLayoutAnimationPolicy设置为SnapLayoutAnimationPolicy，让所有子组件的布局变化都瞬间完成：

ModalBottomSheetLayout(
    sheetContent = {
        CompositionLocalProvider(LocalLayoutAnimationPolicy provides SnapLayoutAnimationPolicy) {
            var text by remember{ mutableStateOf("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum")}
            Text(text = text, Modifier.clickable { text = "a much shorter line of text" })
        }
    },
    sheetShape = RoundedCornerShape(12.dp),
) {
    // 主内容区域
}

验证效果 #

这两种方案都能让Text从多行切换到单行时，直接跳转到正确的布局位置，不会出现中间的跳动异常。你可以根据自己的场景选择：如果只有单个组件变化，用方案1更轻量；如果有多个组件，方案2更高效。

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