You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Compose ModalBottomSheetLayout如何实现点击展开至Expanded且保留Half Expanded

解决ModalBottomSheetLayout默认展开至Expanded且保留Half Expanded状态的问题
  • 保持skipHalfExpanded = false,确保半展开状态可正常触发
  • 点击按钮时,直接调用sheetState.expand()替代show(),该方法会将底部弹窗从隐藏状态直接动画到完全展开(Expanded)状态
  • 用户向下拖动收起弹窗时,由于skipHalfExpanded为false,弹窗会自动停留在半展开(Half Expanded)状态

代码示例:

val sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = false // 保留半展开状态
)
val scope = rememberCoroutineScope()

// 按钮点击事件
Button(onClick = {
    scope.launch {
        sheetState.expand() // 直接展开至完全状态
    }
}) {
    Text("打开弹窗")
}

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        // 弹窗内容
        Text("这是底部弹窗内容", modifier = Modifier.padding(16.dp))
    }
) {
    // 主界面内容
}

如果弹窗已处于半展开状态,点击按钮调用expand()也会自动将状态动画切换至完全展开,完全满足两种状态的需求。

内容的提问来源于stack exchange,提问作者Денис

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.20 22:32:49