在已有传统View Activity上实现Compose Bottom Sheet并保留底层内容可见

要实现Compose Activity作为带Bottom Sheet的浮层，让下方原View Activity可见，核心是让新Activity完全透明，只显示Bottom Sheet部分，具体步骤如下：

1. 定义透明主题 #

在res/values/styles.xml中添加专为Compose Activity设计的透明主题，确保窗口背景、系统栏都透明：

<style name="TransparentComposeTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
</style>

2. 配置Compose Activity的Manifest #

给你的Compose Activity指定上述透明主题，同时按需设置启动模式：

<activity
    android:name=".ComposeBottomSheetActivity"
    android:theme="@style/TransparentComposeTheme"
    android:launchMode="singleInstance" />

3. 编写Compose Activity代码 #

用ModalBottomSheetLayout实现Bottom Sheet，根布局设为透明，点击空白区域可关闭Activity：

class ComposeBottomSheetActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TransparentComposeTheme {
                val sheetState = rememberModalBottomSheetState(
                    initialValue = ModalBottomSheetValue.Expanded,
                    skipPartiallyExpanded = false // 允许半展开状态，不需要则设为true
                )
                val scope = rememberCoroutineScope()

                // 透明根布局，点击空白区域关闭Activity
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Transparent)
                        .clickable {
                            scope.launch {
                                sheetState.hide()
                                finish()
                            }
                        }
                ) {
                    ModalBottomSheetLayout(
                        sheetState = sheetState,
                        sheetContent = {
                            // 这里填写你的Bottom Sheet内容
                            Column(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(16.dp)
                                    .height(300.dp)
                            ) {
                                Text(text = "Compose Bottom Sheet", fontSize = 20.sp)
                                // 更多自定义内容...
                            }
                        },
                        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
                        sheetBackgroundColor = MaterialTheme.colorScheme.surface
                    ) {
                        // 上方空白区域无需内容，留空即可
                    }
                }
            }
        }
    }
}

关键注意点 #

• 透明主题是核心：如果不设置，新Activity会用默认不透明背景覆盖原Activity
• 处理Bottom Sheet关闭逻辑：通过sheetState.hide()完成动画后，调用finish()关闭Compose Activity
• 系统栏适配：根据你的App主题调整状态栏、导航栏的文字颜色，避免透明背景下文字不可见

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