在 BottomSheetScaffold 中使用时，Jetpack Compose FloatingActionButton 部分隐藏答案

【问题标题】：Jetpack Compose FloatingActionButton partially hidden when used in BottomSheetScaffold在 BottomSheetScaffold 中使用时，Jetpack Compose FloatingActionButton 部分隐藏
【发布时间】：2023-03-23 23:09:01
【问题描述】：

在底页折叠模式下，FAB 的一半被隐藏。这是代码。如果我只使用Scaffold，则不存在此问题。

class MainActivity : ComponentActivity() {
    @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,
                    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")
                    }
                }
            }
        }
    }
}

我是这样看的：

【问题讨论】：

我认为这可以帮助你。 BottomSheetScaffold with FAB 并且您将 sheetPeekHeight 设置为 0 导致此问题。尝试将其删除或将底部填充添加到 FAB。

标签： android kotlin android-jetpack-compose android-jetpack

【解决方案1】：

@srvy 我也遇到了和你一样的问题，经过一番研究和查看BottomSheetScaffold的组件后，我设法找到了解决方案。

在您的 BottomSheetScaffold 中添加以下参数：

sheetElevation = 0.dp
sheetPeekHeight = 40.dp（默认 56.dp）
sheetBackgroundColor = 颜色.透明

您可以编辑 sheetPeekHeight 以改变 FloatingActionButton 的距离，其他两个则不能。在您的代码中，它看起来像这样：

BottomSheetScaffold(
    sheetElevation = 0.dp,
    sheetPeekHeight = 40.dp,
    sheetBackgroundColor = Color.Transparent,
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = {
       Text("Hello", modifier = Modifier.padding(20.dp))
    },
    sheetPeekHeight = 0.dp,
    floatingActionButton = {
       FloatingActionButton(onClick = {}) {
          Icon(Icons.Filled.Add, contentDescription = "Add")
       }
    }
)

【讨论】：