android 合成BottomSheetScaffold与工作表上边距

v09wglhw 于 2023-03-11 发布在 Android

关注(0)|答案(3)|浏览(158)

我在玩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，这感觉比它应该的更复杂。
有没有更简单的方法来设置顶页边距？

android

来源：https://stackoverflow.com/questions/69684477/compose-bottomsheetscaffold-with-sheet-top-margin

3条答案

按热度按时间

r1wp621o1#

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

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

https://i.stack.imgur.com/wZKnO.png

赞(0）回复(0）举报 2023-03-11

im9ewurl2#

目前没有更简单的方法来实现这一点，您可以尝试在惰性列周围设置一个列，并在列之前加上一个间隔符，这只在sheetState为Expanded时显示。如果您在它折叠时离开它，则底部会出现一个白色间隙。
此外，您需要将sheetBackgroundColor设置为Transparent，并在LazyColumn上使用Color.grey

赞(0）回复(0）举报 2023-03-11

bgibtngc3#

正如这里提到的，目前还没有简单的方法来做到这一点。
但是Modifier.onGloballyPositioned的解决方案似乎对我来说效果不错。
1.我们需要使用Modifier.onGloballyPositioned计算屏幕高度，我们称之为screenHeight
1.从screenHeight中减去x dp（其中x = height of the space between bottom sheet and status bar for your case）并将其存储在类似于lazyColumnHeight的文件中
1.将lazyColumnHeight添加到LazyColumn(Modifier.requireHeight(lazyColumnHeight)...){...}

步骤详情和代码

步骤1：

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

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

第二步：

找到你需要的高度，类似于我们在步骤1中所做的。例如，我用同样的方式计算了topAppBar的高度。

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() }
        }
        sheetContent = {
            LazyColumn(
                modifier = Modifier
                    .requiredHeight(screenHeight - topAppBarHeight)
            ) { ...}
        },
        topBar = {
            TopAppBar(modifier = Modifier
                .onGloballyPositioned {
                    with(localDensity) { topAppBarHeight = it.size.height.toDp() }
                }
            )
        })

赞(0）回复(0）举报 2023-03-11

我来回答

android 合成BottomSheetScaffold与工作表上边距

3条答案

步骤详情和代码

步骤1：

第二步：

第三步：

相关问题

热门标签

最新问答