import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetState
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@Composable
fun ModalSheet(
visible: Boolean,
onDismiss: () -> Unit,
content: @Composable ColumnScope.(SheetState) -> Unit,
) {
val sheetState = rememberModalBottomSheetState()
LaunchedEffect(visible) {
if (visible) {
sheetState.show()
} else {
sheetState.hide()
}
}
if (!visible) {
return
}
ModalBottomSheet(
onDismissRequest = onDismiss,
sheetState = sheetState,
) { content(sheetState) }
}
var visible by remember { mutableStateOf(false) }
Button(
onClick = { visible = true }
) {
Text("Open sheet")
}
ModalSheet(visible = visible, onDismiss = { visible = false }) { sheetState ->
val coroutineScope = rememberCoroutineScope()
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxWidth()
.padding(12.dp)
) {
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
coroutineScope
.launch { sheetState.hide() }
.invokeOnCompletion {
onDismiss()
}
}
) {
Text(text = "Dismiss")
}
}
}