底部功能表

Material Design 3 強制回應底部功能表範例。

如要實作底部功能表，可以使用 ModalBottomSheet 可組合項。

您可以使用 content 運算單元，它會在資料欄中使用 ColumnScope 以配置工作表內容可組合項：

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

以程式輔助方式控制工作表狀態

如要透過程式輔助方式展開及收合工作表，請使用 SheetState。您可以使用 rememberModalBottomSheetState 建立 SheetState 執行個體，並使用 sheetState 參數將該執行個體傳遞至 ModalBottomSheet。SheetState 提供 show 和 hide 函式的存取權，以及與目前工作表狀態相關的屬性。這些暫停函式需要 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt

Jetpack Compose 中的模式底部功能表，顯示內容。