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

Question

I am using BottomSheetScaffold to display a BottomSheet.

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

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

Now I would like to display elements above the sheet which will move along when expanding or closing the sheet. eg like this:

The elements are not FloatingActionButtons.

Is there a Modifier I could use? Can this be achieved with the Box Layout, is there some CoordinatorLayout mode for it? Do I need to write my own layout?

In general: How can I achieve this with Jetpack Compose?

Answer 1

I don't know if there's something built-in in compose (in version rc01 ). But you can achieve this behavior setting transparent color to the sheetBackgroundColor parameter... Something like this:

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

Here is the result: