# **基本概念與用途**

## **BottomSheetScaffold**
- 類似於 `Scaffold`，提供整體結構，支援固定的 `TopBar`、`FloatingActionButton`、`BottomBar` 等。
- 底部面板是**常駐**的，可以展開（Expanded）或收起（Collapsed），但**不會遮蓋主畫面**。
- 適合用於內容結構中**持續存在**的底部區域，例如 Google Maps 中的地點資訊面板。

## **ModalBottomSheet**
- 類似於對話框（Dialog），是一個**模態**的底部面板，出現時會遮罩背景內容（使用 Scrim）。
- 是臨時性出現的，用於**短暫操作或選項選擇**（如分享選單、選擇項目等）。
- 出現時會讓背景不可操作。

---

# **行為差異**

| 特性 | `BottomSheetScaffold` | `ModalBottomSheet` |
|------|------------------------|---------------------|
| 常駐 vs 模態 | 常駐 | 模態（像 Dialog） |
| Scrim 遮罩 | 無 | 有（點擊可關閉） |
| 彈出方式 | 嵌入在 Scaffold 結構中 | 透過觸發事件呼叫顯示 |
| 支援多層級 | 不支援 | 可透過巢狀實現多層 Modal |
| 使用場景 | 導覽、資訊展示 | 選單、操作對話框 |

---

# **使用方式範例**

## `BottomSheetScaffold` 範例：

val scaffoldState = rememberBottomSheetScaffoldState()
BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
        Text("這是 Bottom Sheet 內容")
    },
    sheetPeekHeight = 64.dp
) {
    Text("主畫面內容")
}

## `ModalBottomSheet` 範例：

val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val coroutineScope = rememberCoroutineScope()

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        Text("這是 Modal Bottom Sheet")
    }
) {
    Button(onClick = {
        coroutineScope.launch {
            sheetState.show()
        }
    }) {
        Text("顯示底部選單")
    }
}

---

# **何時用哪個？**

| 使用情境 | 選擇 |
|----------|------|
| 想要像 Google Maps 一樣的可展開資訊面板 | `BottomSheetScaffold` |
| 需要彈出操作選單、表單、或分享對話框 | `ModalBottomSheet` |
| 背景仍需保持可見或互動 | `BottomSheetScaffold` |
| 要強制使用者聚焦在特定選項 | `ModalBottomSheet` |