### 專案初始化與基本說明 - 使用 Material 3 製作可滑動的 Tab Row。 - 專案為 Jetpack Compose 專案，起始於空的 Surface。 - 點擊與滑動皆可切換頁面，並符合 UX 設計預期。 --- ### 建立 TabItem 資料類別 - 定義 TabItem 類別包含標題、未選中圖示、選中圖示。 - 可僅顯示文字標籤，也可加入圖示。 --- ### 建立 Tab 列表 - 建立三個 Tab：Home、Browse、Account。 - 使用 Outlined 圖示作為未選中狀態，Filled 圖示作為選中狀態。 - 為選擇更多圖示，需加入 Material Icons 擴充套件依賴。 --- ### 建立 TabRow - 使用 Column 包含 TabRow 與後續內容。 - TabRow 使用 selectedTabIndex 控制選中項目。 - 每個 Tab 根據是否選中顯示不同圖示。 - 點擊 Tab 更新 selectedTabIndex 狀態。 --- ### 建立 HorizontalPager - 使用 HorizontalPager 讓頁面可滑動。 - pagerState 控制目前頁面與動畫狀態。 - 使用 weight 讓 HorizontalPager 填滿剩餘畫面空間。 - 每一頁顯示對應的 Tab 標題。 --- ### 同步 TabRow 與 HorizontalPager - 使用 LaunchEffect 監聽點擊 Tab 後變更 selectedTabIndex，同步到 pagerState。 - 使用另一個 LaunchEffect 監聽 pagerState.currentPage，變更 selectedTabIndex。 - 避免動畫中途錯誤選中頁面，加入 scrollInProgress 條件判斷。 --- ### ScrollableTabRow 補充 - 若 Tab 數量過多，可改用 ScrollableTabRow。 - ScrollableTabRow 會自動顯示為可滑動形式，並保留 UX 提示。 --- # Terminology - **Tab Row**：一種 Material Design 組件，用於顯示可切換的頁籤。 - **Composable**：Jetpack Compose 中的基本 UI 元件，函數式的 UI 寫法。 - **Horizontal Pager**：Compose 中用來實作橫向滑動頁面的元件，類似舊版的 ViewPager。 - **PagerState**：管理 Horizontal Pager 狀態的類別，例如目前頁面索引。 - **remember**：Compose 中用來在 recomposition 期間保留狀態的函數。 - **mutableStateOf**：建立可觀察且可改變的狀態，用於狀態管理。 - **LaunchedEffect**：用於在組件建立時或狀態變更時觸發協程邏輯的 Composable API。 - **selectedTabIndex**：目前被選取的頁籤索引。 - **Icon**：顯示向量圖示的 Composable 元件。 - **ImageVector**：矢量圖示資源的型別。 - **Text**：Jetpack Compose 中用來顯示文字的 Composable。 - **Modifier**：用來修改 Composable 外觀或行為的介面。 - **fillMaxSize()**：將元件填滿父容器的尺寸。 - **weight()**：在 Column 或 Row 中分配空間比例。 - **contentAlignment**：Box 組件中設定內容的對齊方式。 - **Column**：垂直排列子元件的布局元件。 - **Surface**：一種 Material 元件，用於承載其他 Composable，具有主題樣式。 - **icons.filled**：Material Icons 套件中實心圖示的存取方式。 - **icons.outlined**：Material Icons 套件中線框圖示的存取方式。 - **Tab**：TabRow 中的單一頁籤項目。 - **scrollableTabRow**：可水平滾動的 TabRow，適用於頁籤數量過多的情況。 - **animateScrollToPage**：使用動畫方式切換 Horizontal Pager 的頁面。 - **isScrollInProgress**：PagerState 中判斷目前是否正在滑動的屬性。 - **@OptIn**：用來標記使用實驗性 API 的注解。 - **ExperimentalFoundationApi**：Jetpack Compose Foundation 的實驗性功能標記。 - **build.gradle**：Android 專案的建構設定檔。 - **dependency**：Gradle 中定義外部函式庫的方式。 - **Composable Overload**：指具有相同名稱但參數不同的 Composable 函式版本。 - **apply**：Kotlin 的函式，用於在物件內執行一組操作。 - **data class**：Kotlin 中用來儲存資料的特殊類別。 - **State hoisting**：將狀態管理從子 Composable 提升到父層以利統一管理。 - **scrollEnabled**：決定是否允許滾動的屬性。 - **Recomposition**：Compose 中的 UI 重新組合過程，通常由狀態變化觸發。 - **UI state**：使用者介面目前所顯示的資料狀態。 - **rememberPagerState**：用來建立並記憶 PagerState 的函式。 - **contentDescription**：提供無障礙輔助說明的文字。 - **Image**：用於顯示圖片的 Composable，常與 ImageVector 搭配。 - **List**：Kotlin 中的資料結構，用來儲存有序元素。 - **indexed**：Kotlin 中 forEach 搭配索引使用的方法。 - **if else expression**：Kotlin 的條件運算子，用來根據狀態決定行為。 - **scroll gesture**：用戶在裝置上滑動造成的手勢動作。 - **selected**：決定頁籤是否處於選中狀態的屬性。 - **Modifier.then()**：將多個修飾器串聯起來的方式。 - **alignment**：設定 Composable 在父容器中的對齊方式。 - **Box**：一個可以堆疊子元件的布局容器。 - **padding**：設定 Composable 內部與邊界間距。 - **MaterialTheme**：Material Design 主題樣式套件。 - **ViewPager**：傳統 Android XML 架構中用來滑動頁面的元件。 - **Jetpack Compose**：Google 推出的現代 Android UI 工具包。 - **StateFlow**：Kotlin 中用來表示狀態資料流的類型。 - **CoroutineScope**：Kotlin 協程的作用域，用來啟動非同步任務。 - **Coroutine**：Kotlin 的非同步程式設計工具。 - **Runtime Composition**：Compose 在執行階段處理 UI 組成的機制。 - **UI recomposition trace**：用來追蹤 Compose 中 UI 重組的工具。 - **snapshotFlow**：將 Compose 狀態轉為 Flow 的函式，用於觀察狀態變化。 - **scrollToItem()**：在列表元件中滾動至特定項目的函式。 - **Z-index**：控制 Composable 的堆疊層級。 - **FocusRequester**：控制 Composable 焦點的工具。 - **Navigation Compose**：Jetpack Compose 中實作畫面導覽的工具套件。