Question

我正在使用BottomSheetScaffold 来显示BottomSheet。

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = rememberBottomSheetState(
        initialValue = BottomSheetValue.Collapsed
    )
)

BottomSheetScaffold(
    sheetContent = {
        MySheet()
    },
    scaffoldState = bottomSheetScaffoldState) {
        MyMainContent()
    }
)

现在我想在工作表上方显示元素，这些元素在展开或关闭工作表时会移动。例如像这样：

元素不是 FloatingActionButtons。

有我可以使用的修饰符吗？这可以通过 Box Layout 来实现，是否有一些 CoordinatorLayout 模式？我需要编写自己的布局吗？

一般来说：如何使用 Jetpack Compose 实现这一目标？

Answer 1

我不知道 compose 中是否有内置的东西（在版本 rc01 中）。但是你可以实现这种行为，为 sheetBackgroundColor 参数设置透明颜色......像这样：

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = rememberBottomSheetState(
        initialValue = BottomSheetValue.Collapsed
    )
)

BottomSheetScaffold(
    // the whole sheet will be transparent.
    sheetBackgroundColor = Color.Transparent, 
    sheetContent = {
        Column {
            Text(
                text = "Element",
                Modifier
                    .align(Alignment.CenterHorizontally)
                    .wrapContentWidth()
                    .background(Color.Red)
                    .padding(24.dp)
            )
            // Your bottom sheet content
            Box(
                Modifier
                    .fillMaxWidth()
                    .background(Color.White)) {
                // content
            }
        }
    },
    scaffoldState = bottomSheetScaffoldState
) {
    // The main content
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.Black)) {
    }
}

结果如下：

如何使用 JetpackCompose 将元素锚定到BottomSheet？

1 个答案: