本頁面由 Cloud Translation API 翻譯而成。

部分底部功能表

您可以部分顯示底部功能表，然後讓使用者將其設為全螢幕或關閉。

如要這麼做，請將 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)
                )
            }
        }
    }
}BottomSheet.kt

程式碼的重點

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

showBottomSheet 會控制應用程式是否顯示底部選單。
sheetState 是 SheetState 的執行個體，其中 skipPartiallyExpanded 為 false。
ModalBottomSheet 會採用修飾符，確保在完全展開時填滿螢幕。
ModalBottomSheet 會將 sheetState 做為其 sheetState 參數的值。
- 因此，工作表在首次開啟時只會顯示部分內容。使用者可以拖曳或滑動該視窗，將其設為全螢幕或關閉。
onDismissRequest lambda 會控制使用者嘗試關閉底部功能表時的情況。在本例中，系統只會移除工作表。

結果

使用者首次按下按鈕時，試算表會部分顯示：

底部選單一開始只會填滿畫面部分區域。使用者可以滑動將其填滿畫面，或將其關閉 — **圖 1.** 部分顯示的底部功能表。

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

其他資源

底部功能表