Jetpack组合底板脚手架:避免底板重叠顶栏

Question

我使用< code>BottomSheetScaffold来设置一个带有< code>topBar和一些< code>sheetContent的视图。

当底部工作表完全展开时，它将与 topBar（也称为操作栏或应用栏）重叠。有没有办法确保它不会重叠？

Answer 1

如本期报告所述：https://issuetracker.google.com/issues/209825720，您可以使用屏幕高度并减去所需的偏移量，以获得底部的高度Sheet

@Composable
fun BottomSheetTest() {

    val topOffset = 56.dp

    BoxWithConstraints() {
        val sheetHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() - topOffset }

        BottomSheetScaffold(
            sheetPeekHeight = 96.dp,
            topBar = {
                TopAppBar {
                    Text(text = "Wassertemperaturen", fontSize = 20.sp)
                }
            },
            sheetContent = {
                Column(
                    modifier = Modifier
                        .requiredHeight(sheetHeight)
                        .padding(24.dp),
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Text(text = "OST Badewiese", fontSize = 20.sp)
                    Text("Der beliebte Badeplatz direkt hinter der Hochschule")
                }
            }) {
            Box(Modifier.background(Color.LightGray)) {
                Image(
                    modifier = Modifier.fillMaxSize(),
                    painter = painterResource(id = R.drawable.rapperswil),
                    contentScale = ContentScale.FillBounds,
                    contentDescription = null
                )
            }
        }
    }
}

@Preview(name = "BottomSheetTest")
@Composable
fun PreviewBottomSheetTest() {
    BottomSheetTest()
}