ボトムシートを部分的に表示してから、ユーザーが全画面表示にするか閉じられるようにできます。
これを行うには、skipPartiallyExpanded
を false
に設定した SheetState
のインスタンスを ModalBottomSheet
に渡します。
例
この例では、ModalBottomSheet
の sheetState
プロパティを使用して、最初はシートの一部のみを表示する方法を示します。
@Composable fun PartialBottomSheet() { var showBottomSheet by remember { mutableStateOf(false) } val sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = false, ) Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, ) { Button( onClick = { showBottomSheet = true } ) { Text("Display partial bottom sheet") } if (showBottomSheet) { ModalBottomSheet( modifier = Modifier.fillMaxHeight(), sheetState = sheetState, onDismissRequest = { showBottomSheet = false } ) { Text( "Swipe up to open sheet. Swipe down to dismiss.", modifier = Modifier.padding(16.dp) ) } } } }
コードに関する要点
この例では、次の点に注意してください。
showBottomSheet
は、アプリにボトムシートを表示するかどうかを制御します。sheetState
はSheetState
のインスタンスです。ここでskipPartiallyExpanded
は false です。ModalBottomSheet
は、完全に展開されたときに画面全体に表示されるようにする修飾子を受け取ります。ModalBottomSheet
は、sheetState
パラメータの値としてsheetState
を取ります。- そのため、最初に開いたときにはシートの一部しか表示されません。ユーザーは、アイコンをドラッグまたはスワイプすることで、全画面表示にしたり、閉じたりできます。
onDismissRequest
ラムダは、ユーザーがボトムシートを閉じようとしたときの動作を制御します。この場合は、シートのみが削除されます。
結果
ユーザーが初めてボタンを押すと、シートが部分的に表示されます。
![最初は画面の一部にのみ表示されるボトムシート。ユーザーは、スワイプして画面全体に表示されるか、または閉じることができます。](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-partial.png?hl=ja)
ユーザーがシートを上にスワイプすると、画面全体に表示されます。
![ユーザーが画面全体に広げたボトムシート。](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-fullscreen.png?hl=ja)