部分底部功能表

您可以部分顯示底部功能表，再讓使用者自由查看 全螢幕或關閉影片。

如要這麼做，請將 SheetState 的例項傳遞至 ModalBottomSheet skipPartiallyExpanded 設定為 false。

範例

本範例說明如何使用 sheetState 屬性 ModalBottomSheet，只顯示一部分工作表：

@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)
                )
            }
        }
    }
}
BottomSheet.kt

程式碼相關重點

在這個例子中，請注意下列事項：

• showBottomSheet 可控管應用程式是否要顯示底部功能表。
• sheetState 是 SheetState 的執行個體，其中 skipPartiallyExpanded 為 false。
• ModalBottomSheet 會接受修飾符，確保其填滿整個螢幕 在完全展開的情況下。
• ModalBottomSheet 使用 sheetState 做為其 sheetState 的值 參數。
  • 因此，只有初次開啟時，工作表才會顯示部分內容。 使用者只要拖曳或滑動應用程式，即可變為全螢幕或關閉
• onDismissRequest lambda 可控制使用者嘗試執行以下動作時的處理方式 關閉底部功能表。在此情況下，系統只會移除工作表。

結果

使用者首次按下按鈕時，工作表會顯示一部分的資料：

如果使用者將工作表向上滑動，就會填滿整個螢幕：

，瞭解如何調查及移除這項存取權。

其他資源

• 底部功能表