如何在Jetpack Compose中创建覆盖内容的悬浮面板？

方案一：使用Material3的ModalBottomSheet（推荐） #

官方的ModalBottomSheet可以实现从底部弹出并悬浮在内容上方的效果，关键是不要将它嵌套在Scaffold的bottomSheet参数中（这会导致内容区域上移），而是直接放在Box的上层，配合ModalBottomSheetState控制显示状态。

示例代码：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomOverlayPanelDemo() {
    val scope = rememberCoroutineScope()
    val sheetState = rememberModalBottomSheetState()
    val showSheet = remember { mutableStateOf(false) }

    Box(modifier = Modifier.fillMaxSize()) {
        // 原有页面内容，按钮放在上方区域
        Button(
            onClick = { showSheet.value = true },
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(top = 32.dp)
        ) {
            Text("点击弹出面板")
        }

        // 下方的内容（会被面板覆盖）
        Text(
            text = "这是按钮下方的内容，会被弹出的面板覆盖",
            modifier = Modifier
                .align(Alignment.Center)
                .padding(16.dp)
        )

        // 悬浮底部面板
        if (showSheet.value) {
            ModalBottomSheet(
                onDismissRequest = { showSheet.value = false },
                sheetState = sheetState
            ) {
                // 面板内容
                Text(
                    text = "这是悬浮在上方的底部面板",
                    modifier = Modifier.padding(24.dp)
                )
                // 可以添加更多内容，比如列表、按钮等
            }
        }
    }
}

说明：

• ModalBottomSheet默认会以半透明背景覆盖整个屏幕，面板从底部滑入，完全覆盖下方内容。
• 通过showSheet状态控制面板的显示/隐藏，点击背景或调用scope.launch { sheetState.hide() }可以关闭面板。

方案二：自定义悬浮面板（适合高度定制） #

如果需要更灵活的动画或样式，可以用AnimatedVisibility配合offset动画，手动实现面板从底部滑入并悬浮的效果。

示例代码：

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun CustomBottomOverlayPanel() {
    val showPanel = remember { mutableStateOf(false) }

    Box(modifier = Modifier.fillMaxSize()) {
        // 原有内容
        Button(
            onClick = { showPanel.value = !showPanel.value },
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(top = 32.dp)
        ) {
            Text("切换面板显示")
        }

        Text(
            text = "下方内容会被自定义面板覆盖",
            modifier = Modifier.align(Alignment.Center)
        )

        // 自定义悬浮面板
        AnimatedVisibility(
            visible = showPanel.value,
            enter = slideInVertically(initialOffsetY = { it }),
            exit = slideOutVertically(targetOffsetY = { it })
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.White)
                    .align(Alignment.BottomCenter)
            ) {
                Text(
                    text = "自定义悬浮底部面板",
                    modifier = Modifier
                        .align(Alignment.Center)
                        .padding(16.dp)
                )
            }
        }
    }
}

说明：

• slideInVertically和slideOutVertically实现面板从底部滑入/滑出的动画。
• 面板通过Box的align(Alignment.BottomCenter)固定在底部，层级高于原有内容（因为在Box中后添加的组件层级更高）。
• 可以自定义面板的背景、高度、圆角等样式，满足设计需求。

为什么之前用Scaffold的BottomSheet没成功？ #

Scaffold的bottomSheet参数是将面板作为页面的一部分，会自动调整content区域的布局（让内容上移，避免被面板遮挡），这和你需要的“覆盖下方内容”的需求不符，所以应该使用上述两种方案，让面板悬浮在整个内容的上层。

内容的提问来源于stack exchange，提问作者Pavel