Jetpack Compose Material3中无法找到ModalBottomSheet组件的求助

你遇到的问题是因为Material 3中没有ModalBottomSheet这个直接的可组合函数——这个组件属于Material 2，Material 3对底部弹窗的实现做了调整，以下是两种正确的实现方案：

1. 确认Material 3依赖 #

首先确保你的模块级build.gradle.kts（或build.gradle）中引入了最新稳定版的Material 3依赖：

implementation("androidx.compose.material3:material3:1.2.0")

2. 方案一：使用ModalBottomSheetDialog（对话框式弹窗） #

这是最接近你需求的模态弹窗实现，需要配合协程作用域控制显示/隐藏：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheetDialog
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun SelectedContactSheet(visible: Boolean, onDismiss: () -> Unit) {
    if (visible) {
        ModalBottomSheetDialog(onDismissRequest = onDismiss) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(text = "选中的联系人", style = MaterialTheme.typography.headlineSmall)
                // 在这里添加你的联系人展示内容
                Button(
                    modifier = Modifier.padding(top = 16.dp),
                    onClick = onDismiss
                ) {
                    Text("关闭")
                }
            }
        }
    }
}

// 使用示例
@Composable
fun ContactSheetDemo() {
    val scope = rememberCoroutineScope()
    val showSheet = remember { mutableStateOf(false) }

    Button(onClick = { showSheet.value = true }) {
        Text("打开联系人弹窗")
    }

    SelectedContactSheet(
        visible = showSheet.value,
        onDismiss = { showSheet.value = false }
    )
}

3. 方案二：使用BottomSheetScaffold（联动式弹窗） #

如果需要底部弹窗和主界面有滚动联动等交互，推荐使用这个组件：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContactSheetWithScaffold() {
    val scope = rememberCoroutineScope()
    val sheetState = rememberStandardBottomSheetState()
    val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState)

    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
            ) {
                Text(text = "联系人列表", style = MaterialTheme.typography.headlineSmall)
                // 添加联系人内容
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .padding(16.dp)
        ) {
            Text(text = "主界面内容")
            Button(onClick = {
                scope.launch {
                    if (sheetState.isVisible) sheetState.hide() else sheetState.expand()
                }
            }) {
                Text(if (sheetState.isVisible) "收起弹窗" else "展开弹窗")
            }
        }
    }
}

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