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

Question

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

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

标签： androidandroid-layoutandroid-jetpack-composebottom-sheet

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