部分底部功能表

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

做法是這樣的，請將 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. 部分顯示的底部功能表。

如果使用者在功能表上向上滑動，功能表就會填滿畫面：

這是使用者展開為全螢幕大小的底部功能表。
圖 2. 全螢幕底部功能表。

其他資源