ボトムシートを実装する場合は、ModalBottomSheet
コンポーザブルを使用できます。
content
スロットを使用できます。このスロットでは ColumnScope
を使用して、シート コンテンツのコンポーザブルを列にレイアウトします。
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
プログラムによるシートの展開と折りたたみは、SheetState
を使用して行います。rememberSheetState
を使用して、sheetState
パラメータで ModalBottomSheet
に渡す必要がある SheetState
のインスタンスを作成できます。SheetState
は、show
関数と hide
関数に加え、現在のシート状態に関連するプロパティへのアクセスを提供します。これらの suspend 関数は CoroutineScope
を必要とし(例: rememberCoroutineScope
を使用)、UI イベントに応答して呼び出すことができます。ボトムシートを非表示にする場合は、コンポジションから ModalBottomSheet
を削除してください。
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 -> // Screen content if (showBottomSheet) { ModalBottomSheet( onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Button(onClick = { scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false } } }) { Text("Hide bottom sheet") } } } }