### 建立 Material 3 UI 應用程式

- 使用 Jetpack Compose 建立 Material 3 UI，包含載入圖片並在滾動時重新加載
- 需確保 Android Studio 版本與相應的 Material 3 依賴

### 設定 Material 3 依賴
- Material 3 需要額外的依賴項目，需手動添加
- Android Studio 未來版本將支援直接建立 Material 3 Jetpack Compose 專案
- 需移除舊的 Material 2 依賴，避免與 Material 3 衝突

### 調整 UI 主題與顏色設置

- Material 3 使用 darkColorScheme 和 lightColorScheme 取代 darkColors 和 lightColors
- 移除 primaryVariant，因為 Material 3 不再使用
- colorScheme 取代 colors 作為主題配色

### 動態顏色支援（Dynamic Colors）
- Material 3 提供動態顏色，根據 Android 12+ 設定變化
- dynamicDarkColorScheme 與 dynamicLightColorScheme 負責自動調整顏色
- 依據 SDK 版本與主題模式（Dark / Light）決定是否啟用動態顏色
- 若設備支援 Android 12+，則使用動態顏色
- 若設備低於 Android 12，則使用自訂顏色方案

### 設定主要顏色（Primary Colors）

- 主要顏色為應用程式的主色調，例如 Google 建議使用綠色
- primary 設定為 green80（高亮度以適應深色主題）
- onPrimary 設定為 green20，用於對比主色的元素
- primaryContainer 設定為 green30，可用於背景或按鈕容器
- onPrimaryContainer 設定為 green90，用於主要容器內的內容

### 設定次要與輔助顏色（Secondary & Tertiary Colors）
- secondary 設定為 darkGreen80，比主色深一些
- onSecondary 設定為 darkGreen20，用於對比次要顏色的內容
- tertiary 設定為 violet80，輔助顏色，用於次要操作（如清除按鈕）
- onTertiary 設定為 violet20，確保可讀性

### 錯誤顏色（Error Colors）
- error 設定為 red80，用於錯誤狀態
- onError 設定為 red20，確保錯誤訊息可讀
- errorContainer 設定為 red30，用於錯誤提示框
- onErrorContainer 設定為 red90，用於錯誤框內的文字

### 設定背景與表面顏色（Background & Surface）
- background 設定為 gray10，作為主要背景色
- onBackground 設定為 gray90，確保對比度
- surface 設定為 greenGray30，用於卡片、對話框等表面元素
- onSurface 設定為 greenGray80，適合顯示內容

### 設定反向顏色（Inverse Colors）
- inverseSurface 設定為 gray90，提供對比背景色
- inverseOnSurface 設定為 gray10，確保對比可讀性
- inversePrimary 設定為 green40，適用於特定反向 UI

### 設定額外的顏色變體（Variants & Outline）
- surfaceVariant 設定為 greenGray30，與表面顏色保持一致
- onSurfaceVariant 設定為 greenGray80，確保可讀性
- outline 設定為 greenGray80，適用於邊框或輸入框

### 設定淺色主題（Light Theme）
- 與深色主題類似，但色調更亮，適合淺色模式
- 使用相同的顏色架構，但選擇較深的色調來保持對比
- Google 官方提供的標準顏色組合可作為參考

### 依據 Google 標準選擇顏色
- Google 建議使用特定亮度值（10、20、30、40、80、90）來維持一致性
- 可以使用 HTML Color Picker 選擇主色，並取得不同亮度變體
- 若更換顏色，例如改為橘色，只需保持相同的亮度層級（10、20、30 等）

### 確保顏色相容性與可讀性
- 確保所有顏色搭配有足夠的對比，避免影響可讀性
- 動態顏色可能影響顏色變化，需手動調整某些顏色（如 Surface Variant）
- 避免過度使用主要顏色，以維持 UI 階層感

### 確保 UI 遷移至 Material 3
- 移除舊版 Material 2 相關依賴，避免衝突
- 依照 Material 3 設定新的顏色架構與主題配置
- 測試動態顏色的適應性，確保不同 Android 版本都能正確顯示

### 設定 Shape 檔案

- 移除不必要的匯入，改為使用 Material 3 的 Shape 設定
- 使用 RoundedCornerShape 和 dp 來定義 UI 元件的圓角

### 設定 Typography 檔案

- 移除舊版 Typography 匯入，改為 Material 3 的 Typography
- 將 Body1 改為 BodyMedium 或 BodySmall 來符合新命名規範
- 其餘設定與 Material 2 相同，只需調整名稱與匯入

### 修正 MainActivity 相關匯入
- 修正 Surface 匯入，使其來自 Material 3
- color 需改為 colorScheme，而非舊版 colors
- 按 Ctrl+Alt+O 自動整理未使用的匯入

### 建立 ImageCard 組件
- 在主程式包中建立 ImageCard.kt 檔案
- 建立 Composable ImageCard，包含標題、描述、圖片與兩個 Chips
- 使用 Card Composable 來建立卡片佈局，並設定適當的 Modifier
- 修改卡片顏色，確保與主題一致，避免 Surface 和 Background 在動態顏色下相同

### 設定 Card 內的顏色

- 使用 CardDefaults.cardColors 來設定容器顏色
- 主要顏色來自 MaterialTheme.colorScheme.surfaceVariant
- ContentColor 預設為 onSurfaceVariant，以確保對比度

### 設定圖片載入與顯示
- 使用 Coil 的 rememberAsyncImagePainter 來載入圖片
- 透過 Modifier 設定圖片圓角、填滿最大寬度，並保持 3:2 的長寬比

### 設定標題與描述

- 透過 Column 來放置標題與描述，並添加適當的 Padding
- 標題使用 TitleLarge，描述使用 BodyMedium，以確保層級一致

### 設定 FlowRow 來顯示 Chips

- 使用 FlowRow 來確保 Chips 過寬時自動換行
- 設定 mainAxisSpacing 為 8dp，確保間距適當

### 使用 Assist Chips
- 選擇 AssistChip 來顯示次要操作，如「收藏」與「分享」
- 設定 leadingIcon 與 label，確保視覺一致性
- 設定顏色，確保 Chip 的顏色與 Surface Variant 一致

### 設定 MainActivity 佈局

- 使用 Scaffold 作為主要佈局框架
- 透過 LazyColumn 顯示多個 ImageCard
- 透過 FloatingActionButton 設定主要動作按鈕
- 使用 TopAppBar 來顯示標題

### 設定 FloatingActionButton
- 設定 Icon 為 Add，並確保顏色與 PrimaryContainer 一致
- 讓 FloatingActionButton 顯示在 Scaffold 預設的位置

### 設定 TopAppBar

- 使用 SmallTopAppBar 作為標題列
- 設定顏色為 Surface Variant，確保與主題一致
- 設定 Title Content Color 為 onSurfaceVariant，以確保對比清楚

### 設定 Scaffold 內的 LazyColumn
- 使用 LazyColumn 來顯示 ImageCard 清單
- 設定 contentPadding，確保與其他 UI 元件有適當距離
- 使用 Fake Data 來填充標題與描述

### 測試與調整 UI
- 確保 App 正確顯示深色與淺色主題
- 測試動態顏色變化，確保 UI 會隨系統主題變更
- 若不使用動態顏色，可手動設定主題顏色

### 設定狀態列顏色
- 預設狀態列顏色為紫色，可在 res/values/themes.xml 修改
- 若希望依據深色或淺色主題變更，可分別設定不同的 themes.xml

### 最終測試與驗證
- 確保 UI 風格符合 Material 3 規範
- 測試不同主題與設備，確保顯示正常
- 調整圓角大小，讓 UI 更加美觀

# Terminology
- **Android Studio Dolphin**：Android Studio的版本之一，對Jetpack Compose和Material 3有更好的支持。
- **Android Studio Bumblebee**：舊版本的Android Studio，未內建Material 3的Jetpack Compose專案模板。
- **Material 3 依賴**：Jetpack Compose所需的額外依賴，以支援Material 3 UI元件。
- **Material 2 依賴**：舊版本的Material Design元件，需手動移除以避免混用Material 3。
- **同步依賴（Synchronize Now）**：當修改`build.gradle`後，Android Studio需要同步依賴。
- **深色主題（Dark Color Scheme）**：Material 3的黑暗模式主題配色方案。
- **淺色主題（Light Color Scheme）**：Material 3的亮色模式主題配色方案。
- **動態深色主題（Dynamic Dark Color Scheme）**：根據Android 12+動態生成的深色主題。
- **動態淺色主題（Dynamic Light Color Scheme）**：根據Android 12+動態生成的淺色主題。
- **Build.VERSION.SDK_INT**：檢查裝置的Android版本，以決定是否支援Material 3的動態色彩。
- **Build.VERSION_CODES.S**：代表Android 12的SDK版本代碼。
- **本地環境（Local Context）**：Android Compose環境中用於獲取系統屬性的上下文物件。
- **動態顏色啟用條件**：根據Android版本和主題模式選擇對應的配色方案。
- **色彩方案選擇（Color Scheme Selection）**：根據條件選擇適當的深色、淺色或動態色彩方案。
- **主題顏色（Theme Colors）**：應用程式的整體色彩方案，包括主色、背景色等。
- **顏色定義（Color Definitions）**：在`Color.kt`文件中定義應用程式使用的顏色。
- **色彩亮度級別（Color Brightness Levels）**：不同程度的顏色亮度，如`green 10, 20, 30`等。
- **HTML顏色選擇器（HTML Color Picker）**：用於獲取不同亮度的顏色代碼。
- **主色系（Primary Color Scheme）**：應用程式的主要顏色，如綠色或藍色。
- **次要色系（Secondary Color Scheme）**：與主色系相輔的顏色，通常是深一點的變體。
- **第三色系（Tertiary Color Scheme）**：額外的輔助顏色，用於區別某些特定元素。
- **錯誤色（Error Color）**：代表錯誤狀態的顏色，通常為紅色。
- **中性色系（Neutral Colors）**：包含不同灰度的顏色，用於背景或表面顏色。
- **灰階變體（Gray Variants）**：帶有特定色彩調性的灰色，如`Green Gray`、`Blue Gray`。
- **主色（Primary）**：應用程式主要的標誌性色調。
- **主色容器（Primary Container）**：較主色淡的變體，用於按鈕背景等。
- **主色之上（On Primary）**：應用於主色背景上的文字顏色，確保對比度。
- **主色容器之上（On Primary Container）**：應用於主色容器內的文字顏色。
- **次要色（Secondary）**：與主色相輔的次要顏色。
- **次要色容器（Secondary Container）**：較次要色淡的變體，適用於背景或次要按鈕。
- **次要色之上（On Secondary）**：應用於次要色背景上的文字顏色。
- **次要色容器之上（On Secondary Container）**：應用於次要色容器內的文字顏色。
- **第三色（Tertiary）**：應用程式的輔助色彩，通常與主色、次要色對比。
- **第三色容器（Tertiary Container）**：較第三色淡的變體，用於強調次要元素。
- **第三色之上（On Tertiary）**：應用於第三色背景上的文字顏色。
- **第三色容器之上（On Tertiary Container）**：應用於第三色容器內的文字顏色。
- **錯誤容器（Error Container）**：錯誤訊息的背景顏色，通常比主錯誤色淡。
- **錯誤容器之上（On Error Container）**：應用於錯誤容器內的文字顏色。
- **背景色（Background）**：應用程式的主要背景顏色。
- **背景色之上（On Background）**：應用於背景上的文字顏色。
- **表面色（Surface）**：應用程式中的UI表面顏色，如卡片或對話框。
- **表面色變體（Surface Variant）**：表面顏色的變化版本，可用於區隔內容。
- **表面色之上（On Surface）**：應用於表面上的文字顏色。
- **反向表面色（Inverse Surface）**：深色模式下用於反向UI的背景顏色。
- **反向表面色之上（Inverse On Surface）**：應用於反向表面上的文字顏色。
- **反向主色（Inverse Primary）**：與主色相反的顏色，通常在特定UI中使用。
- **輪廓色（Outline Color）**：用於邊框或分隔線的顏色，確保元素可視化。
- **顏色模式切換（Color Mode Switching）**：根據用戶偏好或系統設置切換淺色與深色模式。
- **自訂顏色方案（Custom Color Scheme）**：開發者自定義的顏色配置，可用於品牌識別。
- **形狀系統（Shape System）**：用於定義UI元件的圓角、邊界和形狀樣式。
- **圓角形狀（Rounded Corner Shape）**：提供不同大小的圓角設定，如小、中、大等級。
- **dp（Density-independent Pixels）**：與裝置螢幕密度無關的尺寸單位，適用於UI設計。
- **Typography（字體排版）**：定義字體樣式，包括標題、正文、標籤等不同等級。
- **Body Medium**：中等大小的正文樣式，用於一般文字內容。
- **Body Small**：小型正文樣式，適用於較小的文字顯示。
- **Title Large**：大標題字體，適用於主要標題區塊。
- **MaterialTheme（材質主題）**：Jetpack Compose中的主題系統，管理顏色、形狀和字體。
- **ColorScheme（顏色方案）**：Material 3的配色系統，包含主要、次要、表面和背景顏色。
- **LazyColumn（懶加載列表）**：用於顯示大量項目的垂直列表，可優化效能。
- **Scaffold（腳手架佈局）**：提供常見UI元素的佈局框架，如頂部欄、底部欄、FAB等。
- **Floating Action Button（FAB）**：懸浮操作按鈕，通常用於主要動作。
- **Icon（圖示）**：Material 3內建的向量圖示，可用於按鈕、標籤等。
- **Outlined Favorite Icon**：帶有外框的「收藏」圖示（心形圖案）。
- **Assist Chip**：提供輔助操作的標籤按鈕，適合次要動作。
- **Suggestion Chip**：用於提供建議選項的標籤，如搜尋建議。
- **Filter Chip**：類似於單選按鈕，可用於過濾選項。
- **Input Chip**：用於顯示使用者輸入的內容，例如電子郵件接收者標籤。
- **FlowRow（流式佈局）**：可將子項目自動換行的佈局方式，適合標籤類型的內容。
- **Content Padding（內容內邊距）**：提供動態內邊距，以適應動畫或變化的UI元素。
- **Content Color For（內容顏色對應）**：根據背景色動態選擇適合的前景色。
- **TextStyle（文字樣式）**：用於定義字體、字重、大小等文字屬性。
- **Top App Bar（頂部應用欄）**：應用程式的標題欄，可顯示標題、按鈕等。
- **Small Top App Bar**：較小的應用欄，適合一般標題用途。
- **Center Aligned Top App Bar**：標題置中的應用欄，適用於標誌性標題。
- **App Bar Colors**：定義應用欄的顏色，如背景色與標題文字顏色。
- **Surface Variant**：表面變體顏色，用於與背景區分的表面元素。
- **Card（卡片）**：Material 3中的容器元件，適合顯示資訊塊。
- **Card Colors**：設定卡片的背景色與內容顏色。
- **Card Defaults**：提供卡片的預設顏色方案，如輪廓、填充樣式。
- **Coil（圖片載入庫）**：用於Jetpack Compose的高效圖片加載庫。
- **RememberAsyncImagePainter**：Coil中的異步圖片加載器，適用於Compose。
- **Clip（裁剪）**：用於剪裁元件形狀，例如圓角矩形、圓形等。
- **Aspect Ratio（寬高比）**：控制圖片或視圖的寬度與高度比例。
- **Spacer（間距元件）**：用於在UI元素之間添加空間。
- **Modifier（修飾符）**：用於控制Compose組件的樣式與行為。
- **FillMaxWidth（填充最大寬度）**：讓元件佔據父容器的全部寬度。
- **SizeMode.Wrap（尺寸模式：包裹內容）**：元件的大小會根據內容調整。
- **Icons.Default.Add**：Material 3的「新增」按鈕圖示。
- **AnnotatedComposable**：用於標記Composable函數，確保其可正確運行。
- **Material 3 Dynamic Colors**：允許應用程式根據使用者的桌布動態變更顏色主題。
- **Theme.xml**：Android的主題設定檔案，可自訂狀態欄顏色等屬性。
- **Status Bar Color（狀態欄顏色）**：Android的頂部狀態列背景色，可根據主題變更。
- **Theme Override（主題覆蓋）**：允許根據使用者偏好覆蓋預設的Material主題設定。
- **Dynamic Theming（動態主題）**：根據裝置系統色彩自動變更應用配色。
- **Image Card（圖片卡片）**：顯示圖片與描述文字的卡片元件。
- **MainActivity（主活動）**：Android應用的主要啟動點，負責渲染UI。
- **GitHub Repository（GitHub儲存庫）**：存放與共享專案程式碼的平台，可用於開源專案管理。