一、底部弹窗BottomSheetScaffold
效果图:
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetExample() {
val scaffoldState = rememberBottomSheetScaffoldState()
val bottomSheetState = scaffoldState.bottomSheetState
val scope = rememberCoroutineScope()
BottomSheetScaffold(
scaffoldState = scaffoldState,
sheetContent = {
Column(modifier = Modifier.padding(16.dp).height(300.dp)) {
Text(text = "This is a bottom sheet")
Button(
onClick = {
// 处理按钮点击事件
scope.launch { bottomSheetState.collapse() }
},
modifier = Modifier.padding(top = 16.dp)
) {
Text(text = "关闭")
}
}
},
sheetPeekHeight = 0.dp
) {
// 页面内容
Button(
onClick = { scope.launch { bottomSheetState.expand() } },
modifier = Modifier.padding(16.dp)
) {
Text(text = "打开底部表单")
}
}
}
二、底部弹窗ModalBottomSheetLayout
ModalBottomSheetLayout 是 Jetpack Compose 中的一个组件,用于创建底部弹窗。它可以在屏幕底部显示一个半透明的背景,并从底部滑出一个内容面板。ModalBottomSheetLayout 包含两个主要部分:背景和内容面板。
效果图:
代码如下:
val modalBottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden )
val coroutineScope =rememberCoroutineScope()
Column {
// 使用ModalBottomSheetLayout包装BottomSheet的内容
ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetContent = {
// BottomSheet的内容
Column {
Text("BottomSheet Content")
Button(onClick = { coroutineScope.launch { modalBottomSheetState.hide() } }) {
Text("Close BottomSheet")
}
}
}
) {
// 主要内容
Button(onClick = {
Log.e("TAG","TTTTT")
coroutineScope.launch { modalBottomSheetState.show() } }) {
Text("弹出 BottomSheet")
}
}
}