您可以部分顯示底部功能表,然後讓使用者切換為全螢幕或關閉。
如要這樣做,請將 ModalBottomSheet
一個 SheetState
例項,並將skipPartiallyExpanded
設為 false
。
範例
以下範例說明如何使用 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
lambda 可控制使用者嘗試關閉底部功能表時會發生什麼事。在此情況下,系統只會移除工作表。
成果
使用者首次按下按鈕時,工作表會顯示一部分的資料:
![底部功能表,一開始只會填滿部分畫面。使用者可以透過滑動方式填滿螢幕,或是關閉應用程式](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-partial.png?hl=zh-tw)
如果使用者將工作表向上滑動,就會填滿整個螢幕:
![使用者展開至填滿整個螢幕的底部功能表。](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-fullscreen.png?hl=zh-tw)