Jetpack Compose BottomSheet圆角随进度动画异常修复问询

问题分析 #

你遇到的核心问题是未区分BottomSheet的状态转换方向，仅单一基于progress.fraction计算圆角，导致反向拖动（从Expanded到Collapsed）时动画逻辑完全反向；同时直接用浮点数==判断稳定状态存在精度风险。

从你的日志能看到：

• 稳定折叠（Collapsed）状态下，progress.fraction为1
• 从折叠拖动到展开时，progress.fraction从1逐步降到接近0，最终回到1（稳定展开）
• 反向拖动时，progress.fraction从0升到1，原代码的30*(1-progress.fraction)会让圆角从30dp降到0dp，和预期的「从0升到30dp」完全相反。

解决方案 #

通过区分稳定状态和过渡状态，并根据状态转换方向调整圆角计算逻辑，同时用Compose提供的isCollapsed/isExpanded判断稳定状态（避免浮点数精度问题）。

修改后的代码 #

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = rememberBottomSheetState(BottomSheetValue.Collapsed)
)

val sheetState = bottomSheetScaffoldState.bottomSheetState
val radius = when {
    // 稳定折叠状态，固定30dp圆角
    sheetState.isCollapsed -> 30.dp
    // 稳定展开状态，圆角为0
    sheetState.isExpanded -> 0.dp
    // 过渡状态：从折叠到展开，圆角从30dp平滑降到0
    sheetState.targetValue == BottomSheetValue.Expanded -> 30.dp * (1 - sheetState.progress.fraction)
    // 过渡状态：从展开到折叠，圆角从0平滑升到30dp
    else -> 30.dp * sheetState.progress.fraction
}

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = { SheetContent(tracks) },
    sheetShape = RoundedCornerShape(
        bottomStart = 0.dp,
        bottomEnd = 0.dp,
        topStart = radius,
        topEnd = radius
    ),
    sheetElevation = 8.dp,
    sheetPeekHeight = 400.dp,
    modifier = Modifier.fillMaxSize()
) {
    MainSheetContent(album)
}

关键改进点 #

1. 用isCollapsed/isExpanded判断稳定状态：避免直接比较浮点数progress.fraction == 1f带来的精度误差，代码逻辑更清晰。
2. 区分过渡方向：根据targetValue判断状态转换方向，分别对应不同的圆角计算逻辑，确保双向拖动时动画都符合预期。
3. 逻辑分层：先处理稳定状态，再处理过渡状态，代码结构更易维护。

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