如何在Jetpack Compose中将BottomSheetScaffold扩展到特定的高度？

Question

如何在Jetpack Compose中将BottomSheetScaffold扩展到特定的高度？

androidandroid-layoutandroid-jetpack-composebottom-sheet

13

有没有一种方法可以将BottomSheetScaffold扩展到特定的高度？

我的BottomSheetScaffold内容是一个大列表，因此它会扩展到全屏。我没有找到一种总是能够扩展到特定高度的方法，而不管内容是什么。

- Cyril

2个回答

4

底部工作表不会扩展超过内容的高度。
要限制内容的最大高度，您可以在BottomSheetScaffold中的sheetContent根项目上使用一些高度调整器(例如heightIn(max = 300.dp)或height(300.dp))。
当然，您可以使用一些预定义的值或根据脚手架大小计算它。

- Maciej Ciemięga

同意你的想法。我本来想扩展我的内容，但是只限于动态列表，其中可能包含15个以上的项目，但是大小固定，不会占满整个屏幕。 - Cyril

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thracian · Accepted Answer

您可以在sheetContent上使用heightIn(min = 100.dp, max = 500.dp)。

   val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetElevation = 8.dp,
        sheetShape = RoundedCornerShape(
            bottomStart = 0.dp,
            bottomEnd = 0.dp,
            topStart = 12.dp,
            topEnd = 12.dp
        ),
        sheetContent = {
            SheetContent()
        },
        // This is the height in collapsed state
        sheetPeekHeight = 70.dp
    ) {
        MainContent(bottomSheetScaffoldState.bottomSheetState)
    }

@Composable
private fun SheetContent() {
    Column(modifier = Modifier.heightIn(min = 100.dp, max = 500.dp)) {
        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = "Places to Visit",
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold,
            color = Color(0xffFDD835),
            fontSize = 24.sp,
            modifier = Modifier.padding(8.dp)
        )
        LazyColumn(
            contentPadding = PaddingValues(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(places) { place ->
                PlacesToBookVerticalComponent(place = place)
            }
        }
    }
}

如果你想查看状态和滚动位置，你可以使用以下方式进行检查：

@ExperimentalMaterialApi
@Composable
private fun MainContent(bottomSheetState: BottomSheetState) {

    val direction = bottomSheetState.direction
    val currentValue: BottomSheetValue = bottomSheetState.currentValue
    val targetValue: BottomSheetValue = bottomSheetState.targetValue
    val overflow = bottomSheetState.overflow.value
    val offset = bottomSheetState.offset.value

    val progress = bottomSheetState.progress
    val fraction = progress.fraction
    val from = progress.from.name
    val to = progress.to.name

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xff6D4C41))
            .padding(top = 30.dp)
    ) {
        Text(
            color = Color.White,
            text = "direction:$direction\n" +
                    "isExpanded: ${bottomSheetState.isExpanded}\n" +
                    "isCollapsed: ${bottomSheetState.isCollapsed}\n" +
                    "isAnimationRunning: ${bottomSheetState.isAnimationRunning}"
        )

        Text(
            color = Color.White,
            text = "currentValue: ${currentValue}\n" +
                    "targetValue: ${targetValue}\n" +
                    "overflow: ${overflow}\n" +
                    "offset: $offset"
        )

        Text(
            color = Color.White,
            text = "progress: $progress\n" +
                    "fraction: ${fraction}\n" +
                    "from: ${from}\n" +
                    "to: $to"
        )
    }
}