如何使用 Jetpack Compose 将元素锚定到底部表？答案

【问题标题】：How to anchor Elements to BottomSheet with JetpackCompose?如何使用 Jetpack Compose 将元素锚定到底部表？
【发布时间】：2021-07-09 20:54:27
【问题描述】：

我正在使用 BottomSheetScaffold 来显示一个 BottomSheet。

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

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

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

元素不是 FloatingActionButtons。

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

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

【问题讨论】：

标签： android android-jetpack-compose

【解决方案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)) {
    }
}

结果如下：

【讨论】：