### 使用 BottomSheetScaffold 建立 Bottom Sheet - 使用 `@OptIn(ExperimentalMaterial3Api::class)` 啟用實驗性 API - 使用 `BottomSheetScaffold` 搭配 `sheetContent` 顯示底部內容 - 使用 `Box` 設定內容大小與對齊方式，並放置「Close」按鈕 - 使用 `rememberBottomSheetScaffoldState()` 建立狀態控制物件 - 使用 `rememberCoroutineScope()` 啟動協程來控制展開與收起 - `sheetPeekHeight` 設為 0.dp 表示初始不顯示 - 點擊按鈕可觸發展開或部分收起行為 - 可透過 `sheetShape`、`sheetContainerColor` 等參數自訂樣式 --- ### 使用 ModalBottomSheet 建立 Bottom Sheet - 透過布林值 `isOpen` 控制 Bottom Sheet 是否顯示 - 使用 `ModalBottomSheet` 並透過 `onDismissRequest` 控制關閉邏輯 - 使用 `Box` 顯示內容並放置「Close」按鈕 - 使用 `rememberModalBottomSheetState()` 控制 Bottom Sheet 狀態 - 透過協程呼叫 `expand()` 或 `hide()` 控制開啟與關閉 - 關閉後更新 `isOpen` 為 false --- ### ModalBottomSheet 的 UI 遮擋問題與解法 - 底部內容可能會被系統導航列遮住 - 使用 `WindowCompat.setDecorFitsSystemWindows(window, false)` 停用預設行為 - 使用 `WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()` 取得 padding - 將取得的 padding 加上數值後套用到內容的 `Modifier.padding` 中 - 套用背景色便於觀察 padding 效果 --- ### 建議與實作選擇 - `BottomSheetScaffold` 適用需要 Scaffold 整合的情境 - `ModalBottomSheet` 適用於簡單彈出式需求 - 根據 UI 架構與互動需求選擇適當實作方式 - UI 被遮擋時應使用 WindowInsets 解決顯示問題 ### Terminology - Bottom Sheet：一種從螢幕底部滑出的 UI 元件，用於顯示次要內容。 - BottomSheetScaffold：Material 3 提供的 Composable，可用於建立具有底部抽屜的 Scaffold。 - ModalBottomSheet：模態形式的底部抽屜，會遮蔽背景，使用者需與其互動或關閉後才能操作其他內容。 - ScaffoldState：用來管理 Scaffold 組件的狀態，如 BottomSheet 的展開與收合狀態。 - BottomSheetScaffoldState：管理 BottomSheetScaffold 的狀態，包括其底部抽屜狀態。 - rememberBottomSheetScaffoldState：用於創建並記憶 BottomSheetScaffoldState 的 Compose 函數。 - ModalBottomSheetState：用來管理 ModalBottomSheet 的狀態，例如展開、隱藏等。 - rememberModalBottomSheetState：用來創建並記憶 ModalBottomSheetState 的 Compose 函數。 - partialExpand()：BottomSheet 的部分展開狀態方法。 - expand()：將 BottomSheet 完全展開的方法。 - hide()：將 BottomSheet 隱藏的方法。 - coroutineScope：Compose 中用於啟動非同步操作的協程作用域。 - rememberCoroutineScope：用來記憶 coroutineScope 的 Compose 函數。 - onDismissRequest：當使用者點擊 BottomSheet 外部或按返回鍵時觸發的事件處理。 - modifier：Compose 中用於修飾 Composable 元件的屬性集合。 - fillMaxWidth()：使元件填滿可用的寬度。 - fillMaxSize()：使元件填滿可用的寬高。 - Box：Compose 中的佈局元件，用於堆疊子項目。 - Column：垂直堆疊的佈局元件。 - contentAlignment：Box 的屬性，用於設定內容的對齊方式。 - Button：Compose 中用來建立按鈕的 Composable。 - Text：Compose 中用來顯示文字的 Composable。 - DP：Density-independent Pixels，用於指定裝置獨立像素的單位。 - Modifier.padding()：設定 Composable 的內邊距。 - Color：Compose 中用來設定顏色的類別。 - MaterialTheme：用來存取 Material Design 主題樣式的 Compose API。 - windowInsets：用於獲取系統視窗（如狀態列、導覽列）的內邊距資訊。 - NavigationBars：表示 Android 系統的底部導覽列。 - asPaddingValues()：將 windowInsets 轉換為 PaddingValues 的方法。 - calculateBottomPadding()：計算底部填充高度的方法。 - WindowCompat：Jetpack 提供的工具類，用於管理視窗設定。 - setDecorFitsSystemWindows()：用於控制系統是否為視窗內容自動提供內邊距。 - Surface：Compose 中的容器元件，可設定背景、形狀與點擊事件。 - experimentalMaterial3Api：用於啟用 Material 3 的實驗性 API。 - mutableStateOf：建立可變的狀態，用於 Compose 的狀態管理。 - remember：Compose 的記憶函數，用於保持狀態或值。 - LaunchedEffect：用於在組成後啟動協程或一次性邏輯的 Compose 函數。 - showModalBottomSheet：用於顯示模態底部抽屜的 Compose 函數。 - isSystemInDarkTheme：檢查當前是否為深色模式。 - Material3：Material Design 的第三版，提供新的元件與設計風格。 - showBottomSheet：自定義或系統定義的開啟底部抽屜功能。 - State Hoisting：將狀態提升到呼叫元件中以便統一管理的 Compose 設計模式。 - onClick：按鈕或元件被點擊時所執行的事件處理器。 - animate*AsState：用於在 Compose 中實現動畫過渡的函數。 - SnackbarHostState：用來控制 Snackbar 顯示狀態的類別。 - LazyColumn：可捲動的垂直列表，僅在需要時才組成子項目。 - Scaffold：Material Design 中的框架結構，用於組織 App 的基本 UI 結構。 - Composable：Compose 中的函數，用於建立 UI 元件。 - Modifier.background()：設定元件的背景顏色。 - Arrangement：Compose 中用來設定佈局子項目的排列方式。 - Alignment：Compose 中用來設定子項目的對齊方式。 - Insets：表示系統 UI 區域（如狀態列、導覽列）的空間配置。 - MaterialSurface：基於 Surface 且符合 Material Design 的樣式設計容器。 - Shape：用於設定元件的邊角形狀。 - ContainerColor：設定容器背景顏色的屬性。 - navigationBars：Compose 提供的 API，用於讀取底部導覽欄的高度與配置。