Android Compose迁移Material3后ModalBottomSheet引用失败求助

原因分析 #

Material3 1.0.1稳定版的核心库中并没有包含ModalBottomSheet组件，这个组件是在1.1.0及以后的稳定版才被合并到androidx.compose.material3:material3核心依赖中的。你当前依赖版本是1.0.1，自然无法找到这个引用，而其他基础组件（如Button、Card等）在1.0.1中是存在的，所以只有这个组件报错。

解决方案 #

方案1：升级Material3依赖版本

将material3的依赖版本升级到1.1.0或更高的稳定版，比如当前最新稳定版1.2.1：

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

升级后同步项目，就能正常导入import androidx.compose.material3.ModalBottomSheet并使用了。

方案2：在1.0.1版本中使用替代组件

如果暂时不想升级版本，可以使用1.0.1中提供的ModalBottomSheetLayout来实现底部弹窗功能，示例代码如下：

import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheetLayout
import androidx.compose.material3.ModalBottomSheetState
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import kotlinx.coroutines.launch

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

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            Column(
                modifier = Modifier.fillMaxSize().wrapContentSize()
            ) {
                Text("这是M3 1.0.1中的底部弹窗内容")
                Button(onClick = {
                    scope.launch { sheetState.hide() }.invokeOnCompletion {
                        if (!sheetState.isVisible) {
                            showSheet.value = false
                        }
                    }
                }) {
                    Text("关闭弹窗")
                }
            }
        }
    ) {
        Column(
            modifier = Modifier.fillMaxSize().wrapContentSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Button(onClick = { showSheet.value = true }) {
                Text("打开底部弹窗")
            }
        }
    }

    // 控制弹窗显示
    if (showSheet.value) {
        scope.launch { sheetState.show() }
    }
}

注意：ModalBottomSheetLayout在M3 1.0.1中属于实验性API，需要添加@OptIn(ExperimentalMaterial3Api::class)注解才能使用。

内容的提问来源于stack exchange，提问作者loic .B