BottomSheetScaffold组件重组后约束失效问题及正确实现咨询

问题本质 #

在BottomSheetScaffold的内容中触发重组是完全合理的开发实践，属于Compose声明式开发的常规操作。你遇到的异常是旧版本Compose Material库中BottomSheetScaffold的已知实现缺陷：组件内部的底部sheet偏移量、拖动约束等状态没有和传入的scaffoldState做正确的持久化绑定，当仅内容区域触发重组、而sheetPeekHeight等sheet相关参数未发生变化时，组件会错误重置内部状态，导致底部sheet失去原有的交互约束。

修复方案 #

1. 最优解：升级依赖 #

直接将Compose Material依赖升级到1.1.0及以上版本，该bug已经被官方修复。升级后你现有代码无需做任何修改即可正常运行，不需要额外添加修改sheetPeekHeight的临时逻辑。

2. 低版本兼容方案 #

如果受项目约束无法升级依赖，可以用以下规范的方式替代修改sheetPeekHeight的脏逻辑：
新增一个仅用于触发BottomSheetScaffold自身重组的标记位，在内容区状态变更时同步更新标记位，强制Scaffold重新绑定内部状态：

@ExperimentalMaterialApi
@Composable
fun HomeScreen() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val (buttonText, setButtonText) = remember {
        mutableStateOf("Button")
    }
    // 新增重组触发标记
    var scaffoldRecomposeKey by remember {
        mutableStateOf(0)
    }
    val sheetPeekHeightValue by remember {
        mutableStateOf(50.0)
    }
    val coroutineScope = rememberCoroutineScope()
    // 给BottomSheetScaffold绑定key
    key(scaffoldRecomposeKey) {
        BottomSheetScaffold(
            scaffoldState = bottomSheetScaffoldState,
            sheetContent = {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                ) {
                    Text(text = "Hello from sheet")
                }
            }, 
            sheetPeekHeight = sheetPeekHeightValue.dp
        ) {
            Button(onClick = {
                coroutineScope.launch {
                    if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                        bottomSheetScaffoldState.bottomSheetState.expand()
                    } else {
                        bottomSheetScaffoldState.bottomSheetState.collapse()
                    }
                }
            }) {
                Text(text = buttonText)
            }
            Button(onClick = {
                setButtonText(buttonText + ".")
                // 更新标记触发Scaffold重组
                scaffoldRecomposeKey++
            }){Text("Changing Text Button")}
        }
    }
}

3. 优化建议 #

• 优先将内容区的业务状态下沉到独立子组件内部，仅保留和底部sheet交互相关的状态在顶层，减少不必要的顶层重组范围。
• 底部sheet的状态操作统一封装到ViewModel或者单独的状态管理类中，避免和页面业务逻辑耦合。

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