Jetpack Compose BottomSheetScaffold下FloatingActionButton部分隐藏问题

• BottomSheetScaffold对FloatingActionButton的位置计算逻辑和普通Scaffold不同：它会默认将FAB的底部偏移量与sheetPeekHeight参数绑定，以此保证底表折叠时FAB刚好在底表预览区域上方。
• 当你设置sheetPeekHeight = 0.dp时，系统计算得到的FAB底部偏移量为0，FAB底部直接对齐屏幕下边缘，自然只有上半部分可见。普通Scaffold没有底表逻辑，默认会给FAB加16dp的底部安全边距，所以不会出现该问题。

实际异常效果图：

有两种常用修复方式，按需选择即可：

方案1：手动给FAB添加底部边距 #

直接给FloatingActionButton加底部padding，抵消错误的偏移计算：

floatingActionButton = {
    FloatingActionButton(
        onClick = {},
        // 加16dp底部边距，和普通Scaffold默认边距一致
        modifier = Modifier.padding(bottom = 16.dp)
    ) {
        Icon(Icons.Filled.Add, contentDescription = "Add")
    }
}

方案2：自定义FAB位置参数 #

通过修改BottomSheetScaffold的fabPosition参数，强制指定FAB的底部偏移，不受peekHeight影响：

@ExperimentalMaterialApi
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ScaffTestTheme {
            val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
                bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
            )
            val scope = rememberCoroutineScope()

            BottomSheetScaffold(
                scaffoldState = bottomSheetScaffoldState,
                sheetContent = {
                    Text("Hello", modifier = Modifier.padding(20.dp))
                },
                sheetPeekHeight = 0.dp,
                // 自定义FAB位置，指定底部偏移为16dp
                fabPosition = FabPosition(
                    offset = DpOffset(0.dp, (-16).dp)
                ),
                floatingActionButton = {
                    FloatingActionButton(onClick = {}) {
                        Icon(Icons.Filled.Add, contentDescription = "Add")
                    }
                }
            ) {
                TextButton(onClick = {
                    scope.launch {
                        if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                            bottomSheetScaffoldState.bottomSheetState.expand()
                        } else {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }
                }) {
                    Text("Toggle")
                }
            }
        }
    }
}

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