Compose BottomSheetScaffold with sheet top margin

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

，这感觉比它应该的更复杂。

有没有更简单的方法来设置顶页边距？

Answer 1

我们使用了 ModalBottomSheetLayout 并提供了最大高度作为屏幕空间的一个因素给

modifier

可组合的

sheetContent

：

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

Answer 2

目前没有更简单的方法来做到这一点，你可以尝试在你的懒惰列周围设置一个 Column 之前用一个间隔符，它只在 sheetState 展开时显示。如果你在它折叠时离开它，那么底部会有一个白色间隙。

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

Answer 3

TL;博士

如here所述，目前没有简单的方法可以做到这一点。
然而，

Modifier.onGloballyPositioned

解决方法似乎对我来说工作正常。

它的方式是：

1. 我们需要使用

   screenHeight

    来计算 

   Modifier.onGloballyPositioned
高度
2. 之后我们需要计算

   lazyColumnHeight

   为
   

   lazyColumnHeight

   =

   screenHeight

   -

   x

   （其中

   x

   = 底页和状态栏之间所需的空间）
3. 将

   lazyColumnHeight

   添加到

   LazyColumn(Modifier.requireHeight(lazyColumnHeight)...){...}

   这样它只会消耗这个固定的最大高度。

详细步骤和代码

第一步：

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

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

第二步：

找到您需要的高度，类似于我们在 step 1 中所做的。例如，我以相同的方式计算了

topAppBar

的高度。

var topAppBarHeight by remember { mutableStateOf(0.dp) }
val lazyColumnHeight = screenHeight - topAppBarHeight

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

            )
        })

第三步：

将此差异添加到

LazyColumn

的

Modifier

：

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(lazyColumnHeight)
            ) { ...}
        })