[Jetpack Compose] モーダルシートの表示

implementation "androidx.compose.material:material:1.7.8"

@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
@Composable
fun ModalSheetExample(modifier: Modifier = Modifier) {
	val sheetState = rememberModalBottomSheetState()
	val scope = rememberCoroutineScope()
	var showBottomSheet by remember { mutableStateOf(false) }
	Scaffold(
		floatingActionButton = {
			ExtendedFloatingActionButton(
				text = { Text("Show bottom sheet") },
				icon = { Icon(Icons.Filled.Add, contentDescription = "") },
				onClick = {
					showBottomSheet = true
				}
			)
		}
	) { contentPadding ->
		Box(
			modifier = Modifier.fillMaxSize(),
			contentAlignment = Alignment.Center
		) {
			Column(modifier = Modifier.padding(contentPadding)) {
				Text("ここにメインコンテンツ")
			}
		}

		if (showBottomSheet) {
			ModalBottomSheet(
				onDismissRequest = {
					showBottomSheet = false
				},
				shape = BottomSheetDefaults.ExpandedShape,
				sheetState = sheetState
			) {
				Column(
					modifier = Modifier
						.fillMaxWidth()
						.padding(horizontal = 8.dp)
				) {
					Image(
						painterResource(id = R.drawable.img_android),
						contentDescription = "Android Image",
						contentScale = ContentScale.Fit,
					)
					Spacer(modifier = Modifier.padding(8.dp))
					Button(
						modifier = Modifier.fillMaxWidth(),
						onClick = {
							scope.launch { sheetState.hide() }.invokeOnCompletion {
								if (!sheetState.isVisible) {
									showBottomSheet = false
								}
							}
						}) {
						Text("Hide bottom sheet")
					}
				}
			}
		}
	}
}