如何使用 Jetpack Compose 将 BottomSheetScaffold 扩展到特定高度？

Question

有没有办法将其扩展BottomSheetScaffold到特定高度？

我的内容BottomSheetScaffold是一个很大的列表，因此它会扩展到全屏。我没有找到一种方法，无论内容如何，​​总是扩展到特定高度。

Answer 1

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

   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"
        )
    }
}

Answer 2

底部工作表不会扩展超过内容的高度。
要限制内容的最大高度，您可以在in的根项上使用一些高度修饰符（例如heightIn(max = 300.dp)或） 。 当然，您可以使用一些预定义的值或根据脚手架大小进行计算。height(300.dp)sheetContentBottomSheetScaffold