将BottomSheetScaffold与顶部间距的sheet组合

Question

我在玩弄BottomSheetScaffold时没有弄清如何为抽屉设置顶部间距/最小偏移量/锚点。

将抽屉设置如下：

val scaffoldState = rememberBottomSheetScaffoldState()
BottomSheetScaffold(
    sheetContent = {
        LazyColumn(modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
        ) {
            items(100) {
                Text(text = "Sheet item $it")
                Spacer(modifier = Modifier.height(10.dp))
            }
        }
    },
    scaffoldState = scaffoldState,
    sheetPeekHeight = 100.dp,
    sheetShape = RoundedCornerShape(10.dp),
    sheetBackgroundColor = Color.Gray
) { innerPadding ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
            .background(Color.Green),
        contentAlignment = Alignment.Center
    ) { Text(text = "Content") }
}

在应用程序的底部表中显示以下结果:

折叠:

展开:

我想要的是为表添加一个顶部间距，以便它不会扩展到这个状态以上。

我知道我可以为表内容添加高度，但那样我就必须计算height = windowHeight - bottomNavHeight - sheetTopMargin ，这感觉比预期的更加复杂。

有没有更简单的方法来设置表格上边距？

- SimonSays

---

虽然不是理想的解决方案，但如果将脚手架放在容器内，底部板材只会扩展到容器的高度。 - Naveed

Answer 1

我们使用了 ModalBottomSheetLayout，并将最大高度作为屏幕空间的因素提供给 sheetContent 组件的 modifier。

sheetContent = {
    DatesFilterSheet(
        modifier = Modifier.fillMaxHeight(0.9f)
    )
}

https://istack.dev59.com/wZKnO.webp

- Beardstorm

Answer 2

简介

正如这里所提到的，目前还没有简单的方法来实现此功能。
不过，Modifier.onGloballyPositioned 的解决方案似乎对我很有效。

具体步骤如下：

1. 首先使用 Modifier.onGloballyPositioned 计算出 screenHeight 和 topAppBarHeight
2. 然后需要计算 lazyColumnHeight，公式如下：
   lazyColumnHeight = screenHeight - topAppBarHeight
3. 将 lazyColumnHeight 应用于 LazyColumn(Modifier.requireHeight(lazyColumnHeight)...){...}，以固定 LazyColumn 的最大高度。

步骤详细说明和代码

第一步：

计算 screenHeight 和 topAppBarHeight

    var screenHeight by remember { mutableStateOf(0.dp) }
    var topAppBarHeight by remember { mutableStateOf(0.dp) }
    val localDensity = LocalDensity.current

    BottomSheetScaffold(modifier = Modifier
        .onGloballyPositioned {
            with(localDensity) { screenHeight = it.size.height.toDp() }
        },
        topBar = {
            TopAppBar(modifier = Modifier
                .onGloballyPositioned {
                    with(localDensity) { topAppBarHeight = it.size.height.toDp() }
                }

            ) {...}
        }
    )

步骤2和3：

现在我们已经得到了screenHeight和topAppBarHeight。我们将把这两者的差作为LazyColumn的高度：

var screenHeight by remember { mutableStateOf(0.dp) }
var topAppBarHeight by remember { mutableStateOf(0.dp) }
val localDensity = LocalDensity.current

BottomSheetScaffold(modifier = Modifier
        .onGloballyPositioned {
            with(localDensity) { screenHeight = it.size.height.toDp() }
        }
        topBar = {
            TopAppBar(modifier = Modifier
                .onGloballyPositioned {
                    with(localDensity) { topAppBarHeight = it.size.height.toDp() }
                }
            ) {...}
        },
        sheetContent = {
            LazyColumn(
                modifier = Modifier
                    .requiredHeight(screenHeight - topAppBarHeight)
            ) { ...}
        })

- Mr. Techie

Answer 3

目前没有更简单的方法来实现这个，你可以尝试在你的懒加载列周围设置一个带有间隔的列，在 sheetState 展开时才显示。如果在折叠时保留它，则底部会出现白色间隙。

此外，您需要将 sheetBackgroundColor 设置为透明，并在 LazyColumn 上使用 Color.grey。

- helpinghand

---

是的，听起来这也可能行得通。虽然手动上下滑动底部表格时效果不如人意。我真的希望他们能尽快添加对此的支持。 - SimonSays

我认为这应该是可能的，你只需要监听状态变化，但是由于它太慢了才意识到，所以最终可能会有点不稳定，但是我认为你的解决方案更容易实现 :) 是的，期待有关此支持的更新！ - helpinghand