### Modal Bottom Sheet 基本介紹 - Modal Bottom Sheet 是一種從螢幕底部滑出的視圖。 - 點擊外部或向下滑動可以關閉。 - 背景會變暗，突出 Bottom Sheet。 ### 初始化與使用 Modal Bottom Sheet - 使用 `ModalBottomSheet` composable。 - 需要 `onDismissRequest` 來處理關閉邏輯。 - 顯示內容可自訂，例如顯示圖片。 - 若 IDE 無法辨識 `ModalBottomSheet`，需更新 Compose 版本至 `2023.6.1`。 ### Sheet State 與可見性控制 - 使用 `rememberModalBottomSheetState()` 來建立狀態物件。 - Modal Bottom Sheet 無法設定初始狀態為關閉，因此需額外建立 `Boolean` 狀態變數來控制是否顯示。 - 使用 `if (isSheetOpen)` 判斷是否加入 Bottom Sheet composable。 ### 開啟與關閉邏輯 - 按鈕點擊事件中設定 `isSheetOpen = true`。 - `onDismissRequest` 中設定 `isSheetOpen = false`。 - 雖然 `sheetState` 提供 `expand()` 和 `hide()` 函數，但直接控制可見性不直觀。 ### Modal Bottom Sheet 的限制 - 無法單靠 `sheetState` 控制初始顯示狀態。 - `sheetState.isVisible` 會在動畫完成後才變更，不能作為初始狀態依據。 - 通常需搭配 `Boolean` 狀態使用。 ### 可選設定：Drag Handle - 可自定義拖曳指示器（Drag Handle），不過一般建議使用預設值。 ### Bottom Sheet Scaffold 使用方式 - `BottomSheetScaffold` 是另一種 Bottom Sheet 的實作方式。 - 需提供 `sheetContent` 與 `scaffoldState`。 - `BottomSheetScaffoldState` 使用 `rememberBottomSheetScaffoldState()` 初始化。 - 與 `ModalBottomSheet` 不同，可透過 `sheetState.expand()` 控制展開。 ### Scaffold 內容配置 - 畫面主內容放在 `BottomSheetScaffold` 的 `content` 區塊中。 - Bottom Sheet 內容與主內容分離。 ### 控制顯示與隱藏 - 使用 `CoroutineScope` 搭配 `sheetState.expand()` 或 `sheetState.partialExpand()` 控制顯示狀態。 - 不需額外的 Boolean 狀態變數。 ### 外觀與互動設定 - 可透過 `peekHeight` 設定 Bottom Sheet 初始可見高度。 - 若設為 `0.dp`，將不會預先顯示。 - `BottomSheetScaffold` 中的 Bottom Sheet 無背景遮罩，不能點擊外部關閉。 - 可設定是否允許滑動關閉。 ### 使用情境與建議 - Bottom Sheet 適合用來隱藏額外內容並提供直覺式互動。 - 視使用需求選擇 `ModalBottomSheet` 或 `BottomSheetScaffold`。 ### Terminology - **Modal Bottom Sheet**：一種從螢幕底部滑出的視圖，會遮蔽其他內容並可透過點擊外部或拖曳方式關閉。 - **Bottom Sheet Scaffold**：提供具備底部工作表支援的 Scaffold，可用來建立非模態的底部視圖。 - **Composable**：Jetpack Compose 中的可組合函式，負責描述 UI。 - **MutableState**：可變狀態對象，會觸發 Compose 的重組以更新畫面。 - **remember**：Compose 的函式，用來記憶狀態或對象於 recomposition 期間不重建。 - **rememberSaveable**：記憶狀態並在配置變更（如旋轉）後保留。 - **Lambda**：無名函式，常用於作為回呼函式。 - **onDismissRequest**：當底部視圖被關閉時呼叫的 Lambda。 - **Drag Handle**：底部視圖的拖曳指示器，讓用戶知道可以拖曳。 - **Sheet State**：控制底部視圖顯示狀態的狀態對象。 - **ModalBottomSheetState**：用於模態底部視圖的狀態管理類別。 - **BottomSheetScaffoldState**：用於 scaffold 版本底部視圖的狀態管理類別。 - **expand()**：展開底部視圖的函式。 - **hide()**：隱藏底部視圖的函式。 - **Scaffold**：Compose 的佈局元件，提供 AppBar、FAB 等結構。 - **Content Alignment**：設定子元件的對齊方式。 - **Modifier.fillMaxSize()**：元件擴展填滿父容器大小的修飾器。 - **CoroutineScope**：用於啟動協程的上下文。 - **LaunchedEffect**：啟動一次性或狀態變化時執行的協程。 - **rememberCoroutineScope()**：產生與組合生命週期綁定的協程作用域。 - **SheetContent**：底部視圖中要顯示的內容。 - **Drawable Resource**：Android 專案中的圖像資源，如 PNG。 - **Resource Access**：透過 `R.drawable.xxx` 存取資源。 - **DP（Density-independent Pixels）**：獨立像素單位，適用於不同解析度裝置。 - **Scrim**：背景半透明遮罩，用來凸顯前景元件。 - **Material 3**：最新版本的 Material Design 設計規範。 - **Jetpack Compose**：Android 的現代 UI 工具包，使用 Kotlin 宣告式語法構建 UI。 - **Partial Expansion**：底部視圖部分展開狀態。 - **skipPartiallyExpanded**：是否跳過部分展開狀態的布林值。 - **Initial State**：元件初始狀態設置。 - **peekHeight**：底部視圖初始可見高度。 - **isVisible**：表示動畫完成後是否顯示的屬性。 - **Box**：Compose 中的簡單容器，可疊放子項。 - **Button**：可互動的按鈕元件。 - **Text**：顯示文字的元件。 - **Image**：用於顯示圖片的元件。 - **Alignment.Center**：將內容置中對齊的設定。 - **MaterialTheme**：提供主題顏色、字體與形狀的設定。 - **Navigation Drawer**：從螢幕側邊滑出的導覽面板。 - **Configuration Change**：例如螢幕旋轉或多語系切換等變更。 - **Experimental Annotation**：用來標記實驗性 API 的註解。 - **Composable Hierarchy**：可組合元件之間的層級結構。 - **Composition**：UI 組合的過程。 - **Recomposition**：當狀態變更時重建畫面的過程。 - **State Hoisting**：將狀態提升到上層元件管理的模式。 - **UI Layer**：負責顯示使用者介面的層。 - **Animation**：底部視圖展開或隱藏時的動態效果。 - **Backdrop**：底部視圖顯示時後方內容的模糊或遮罩層。 - **confirmValueChange**：允許確認底部視圖狀態改變的邏輯。 - **SheetElevation**：控制底部視圖的陰影深度。 - **ContainerColor**：底部視圖的背景顏色。 - **Shape**：底部視圖的形狀設定（如圓角）。 - **disableDrag**：設定是否允許拖曳底部視圖。 - **Scaffold Content**：主要畫面佈局的內容部分。 - **SheetContentAlignment**：底部視圖內部內容的對齊方式。 - **NestedScroll**：允許內容與底部視圖共同捲動的設定。 - **SheetGestures**：使用者互動方式，如滑動、點擊等。