Jetpack Compose中BottomSheet初始显示闪烁问题求助

方案1：延迟初始化底部弹窗内容 #

通过追踪底部弹窗状态的稳定性，等它完全稳定在折叠状态后再加载内容，同时用占位布局避免布局跳动：

val bottomSheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)
val isLayoutStable = remember { mutableStateOf(false) }

LaunchedEffect(bottomSheetState.currentValue) {
    if (bottomSheetState.currentValue == BottomSheetValue.Collapsed && !bottomSheetState.isAnimationRunning) {
        isLayoutStable.value = true
    }
}

BottomSheetScaffold(
    sheetState = bottomSheetState,
    sheetContent = {
        if (isLayoutStable.value) {
            // 你的底部弹窗内容
            Text("Bottom Sheet Content")
        } else {
            // 高度和弹窗一致的占位布局
            Spacer(modifier = Modifier.height(200.dp))
        }
    }
) {
    // 页面主体内容
    Text("Main Content")
}

方案2：修改初始状态动画为瞬时完成 #

让初始折叠状态的动画瞬间结束，跳过过渡过程：

val bottomSheetState = rememberBottomSheetState(
    initialValue = BottomSheetValue.Collapsed,
    animationSpec = SnapSpec()
)

BottomSheetScaffold(
    sheetState = bottomSheetState,
    sheetContent = {
        // 你的底部弹窗内容
    }
) {
    // 主体内容
}

如果需要保留后续展开/折叠的动画，可以在LaunchedEffect中手动触发一次无动画的折叠，之后再恢复原有动画规格。

方案3：等待页面布局完成后显示弹窗 #

利用awaitFrame()等待页面完成初始布局，再显示底部弹窗内容：

val bottomSheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)
val sheetVisible = remember { mutableStateOf(false) }

LaunchedEffect(Unit) {
    awaitFrame()
    sheetVisible.value = true
}

BottomSheetScaffold(
    sheetState = bottomSheetState,
    sheetContent = {
        if (sheetVisible.value) {
            // 弹窗内容
        } else {
            Spacer(modifier = Modifier.height(0.dp))
        }
    }
) {
    // 主体内容
}

方案4：规范折叠状态的高度约束 #

确保折叠状态的高度（sheetPeekHeight）和弹窗内容的高度匹配，避免内容溢出导致的布局异常：

val bottomSheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)

BottomSheetScaffold(
    sheetState = bottomSheetState,
    sheetPeekHeight = 0.dp, // 根据需求设置，比如0dp完全隐藏折叠状态
    sheetContent = {
        // 确保弹窗内容在折叠状态下高度不超过peekHeight
        Box(modifier = Modifier.height(300.dp)) {
            Text("Bottom Sheet")
        }
    }
) {
    // 主体内容
}

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