# Creating Your First Jetpack Compose App ![Creating Your First Jetpack Compose App](https://hackmd.io/_uploads/SySWTo98C.jpg) ### Jetpack Compose 簡介 - Jetpack Compose 是一種使用 Kotlin 設計原生 Android 應用的新方法，不再需要 XML。 - 它簡化了 UI 設計，避免了過去需要考慮是否將內容放入 XML 文件、drawable 文件或 themes 文件的困擾。 ### Kotlin 的重要性 - 如果你還在使用 Java，現在是學習 Kotlin 的好時機。 - Kotlin 使得開發 Android 應用變得更加簡單和高效。 ### Android Studio Canary 版的必要性 - Jetpack Compose 目前還不包括在穩定版的 Android Studio 中，需要下載 Canary 版。 - Canary 版是實驗版本，包含最新功能供用戶測試和反饋。 ### 安裝和設定 Android Studio Canary - 下載 Canary 版 Android Studio，解壓縮後進入 bin 文件夾，啟動 studio64 文件（64 位系統）。 - 創建新項目時，選擇 "Empty Compose Activity" 作為模板，並使用 Kotlin 作為編程語言。 ### 初始設定 - 進入新創建的 Compose 項目，發現沒有 layout 文件夾，因為不再需要 XML 文件。 - 使用 `setContent` 函數替代之前的 `setContentView`，在活動中設置內容。 ### Composable 的概念 - 在 Jetpack Compose 中，"Composable" 替代了過去的 "View" 概念。 - 使用 Kotlin 函數來定義 UI，這些函數用 `@Composable` 註解。 ### 簡單範例 - 範例中，定義了一個 `greeting` 函數，顯示 "Hello, [name]" 的文本。 - 將這個 `greeting` 函數作為 `setContent` 的內容，在模擬器中運行並顯示結果。 ### 預覽功能 - 不需要每次都運行應用，可以使用 `@Preview` 註解來預覽 Composable。 - 預覽功能可以即時查看 UI 更改，有時需要手動刷新。 ### 結語 - 這個系列將深入探討如何使用 Jetpack Compose 建立更複雜的 UI。 - 如果喜歡這個介紹並想學習更多進階課程，可以訪問視頻描述中的鏈接。 - 感謝觀看，期待下次再見。 ### 重點整理 - Jetpack Compose 簡化了 UI 設計，不再需要 XML 文件。 - 學習 Kotlin 是開發 Android 應用的關鍵。 - 需要下載 Android Studio Canary 版來使用 Jetpack Compose。 - Composable 函數替代了傳統的 View 概念，使用 Kotlin 函數設計 UI。 - 可以使用 `@Preview` 註解來即時預覽 UI，更高效地進行開發。 # Rows, Columns & Basic Sizing ![Rows, Columns & Basic Sizing](https://hackmd.io/_uploads/H1yB6oqLC.jpg) ### 介紹 - 歡迎回到 Jetpack Compose 教程系列的最新影片。 - 今天我們將討論 Row 和 Column 以及尺寸調整。 ### 上次回顧 - 如果不知道如何設置空的 Compose 專案，請觀看上一個影片。 - 上次我們使用了 `Text` composable 來顯示文字。 ### 初始設定 - 我們在 Compose 專案中新增兩個 `Text` composable。 - 預設情況下，這些文字是堆疊在一起的。 ### 使用 Column 和 Row - 將 `Text` 包裹在 `Column` composable 中，文字將會垂直排列。 - 將 `Text` 包裹在 `Row` composable 中，文字將會水平排列。 ### Column 和 Row 的設定 - 可以在 `Column` 和 `Row` 中使用 `modifier` 來設定背景色和尺寸。 - 示例：設置 `Column` 的背景顏色為綠色並讓它填滿整個螢幕。 ### 尺寸與對齊 - 使用 `fillMaxSize()` 讓 `Column` 填滿整個螢幕。 - 使用 `horizontalAlignment` 和 `verticalArrangement` 來對齊內容。 - `alignment` 和 `arrangement` 的區別： - `alignment` 用於交叉軸（如 Row 的垂直方向）。 - `arrangement` 用於主軸（如 Row 的水平方向）。 ### 使用 Row 的示例 - 將 `Column` 換成 `Row` 並設置對齊方式： - 垂直對齊：`centerVertically()` - 水平排列：`spaceAround()` ### 調整尺寸 - 使用 `modifier` 來調整寬度和高度。 - 示例：`fillMaxSize(0.5f)` 使組件填滿螢幕的 50%。 - 可以使用 `dp` 單位來設置固定寬度和高度。 ### 範例代碼 ```kotlin Column( modifier = Modifier .fillMaxSize() .background(Color.Green), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceAround ) { Text("Hello") Text("World") } ``` ### 結論 - 本視頻介紹了 Row 和 Column 的基本使用以及尺寸調整方法。 - 下次我們將更深入探討 `modifier` 的使用。 ### 重點整理 - 使用 Jetpack Compose 可以更簡單地設計 Android UI，不再需要 XML。 - `Column` 和 `Row` 可以用來垂直或水平排列內容。 - 使用 `modifier` 可以調整組件的背景色和尺寸。 - `alignment` 用於交叉軸對齊，`arrangement` 用於主軸排列。 - 可以使用百分比或固定尺寸來設置組件的寬度和高度。 # Modifiers ![image](https://hackmd.io/_uploads/Hkrv6oqIC.png) ## 修飾符的應用 - 修飾符可以應用於任何 Jetpack Compose 中的可組合項目（Composables），如文本、列、行、圖片等 - 修飾符可以改變外觀、大小、佈局、增加可訪問性標籤，甚至使可組合項目可互動 ## 範例：列（Column）的應用 - 創建一個包含兩個文本的列 - 使用修飾符設定背景顏色、寬度和高度 ## 尺寸調整：width 和 requiredWidth 的比較 - `width` 修飾符設定寬度，若超過父容器寬度，會自動調整到最大可用寬度 - `requiredWidth` 修飾符強制設定寬度，不會根據父容器自動調整 ## Padding（內距） - 設定內距將容器內容推向中間 - 可以單獨設置各邊的內距 ## Offset（偏移） - 偏移效果類似於邊距（margin），但不會推動其他元素 - 使用 Spacer 組件實現類似邊距的效果 ## Border（邊框） - 邊框可以設定寬度、顏色及形狀 - 修飾符可以連續應用，順序影響結果 ## 交互功能 - `clickable` 修飾符使元素可點擊，並附帶點擊效果 - 其他交互修飾符包括 `scrollable` 和 `draggable` ## 結論 - 修飾符功能豐富，應用廣泛 - 下個影片計劃實作一個實際的 UI 組件 ### 重點整理 - 修飾符應用於任何 Jetpack Compose 的可組合項目 - 修飾符可以改變外觀、大小、佈局等 - `width` 和 `requiredWidth` 具有不同的寬度調整行為 - Padding 設置內距，Offset 設置元素偏移 - Border 可以連續應用，創造複雜邊框效果 - `clickable` 使元素可點擊，還有其他交互修飾符 - 下個影片將實作一個實際的 UI 組件 # Creating an Image Card Composable ![image](https://hackmd.io/_uploads/Hk9YL2qI0.png) ## 介紹與概述 - 介紹影片內容，將應用之前學到的知識來製作一個簡單的圖像卡片 - 強調將學到很多新內容，包括漸變效果、圓角、陰影等 ## 預備工作 - 空的 Jetpack Compose 專案 - 圖像已添加到 drawable 資料夾中 ## 創建可組合的圖像卡片函數 - 創建一個名為 `ImageCard` 的可組合函數 - 接受的參數包括圖片、內容描述、標題及修飾符 ## 設置卡片 - 使用 `Card` 元件 - 設置修飾符、形狀和陰影 ## 使用 Box 來堆疊內容 - 使用 `Box` 元件來堆疊內容 - 首先放置圖片，然後是漸變效果，最後是文字 ## 添加圖片 - 使用 `Image` 元件顯示圖片 - 設置圖片的 `painter` 和 `contentDescription` - 使用 `contentScale` 屬性來裁剪圖片 ## 添加文字 - 在 `Box` 中再嵌套一個 `Box` 用於對齊文字 - 使用 `Text` 元件顯示標題 - 設置文字樣式、顏色和字體大小 ## 在主活動中使用 ImageCard - 在 `setContent` 中創建 `ImageCard` 並傳入必要的參數 ## 調整卡片寬度和添加內距 - 使用 `Box` 和修飾符來調整卡片寬度和添加內距 ## 添加漸變效果 - 在圖片和文字之間添加一個 `Box` 作為漸變效果的容器 - 使用 `background` 屬性並設置為漸變刷子 ## 結論 - 簡單且有趣的實作 - 提供更多進階學習資源的推薦 ### 重點整理 - 創建可重用的 `ImageCard` 函數來顯示圖像和文字 - 使用 `Card` 元件設置圓角和陰影 - 使用 `Box` 來堆疊圖片、漸變和文字 - 使用 `Image` 元件顯示圖片，並設置裁剪模式 - 使用 `Text` 元件顯示文字，並設置樣式 - 使用修飾符調整卡片的寬度和添加內距 - 使用漸變刷子創建漸變效果 - 在主活動中實例化 `ImageCard` 並傳入參數 # Styling Text ![image](https://hackmd.io/_uploads/HJklva5LR.png) Demo ![CleanShot 2024-06-27 at 19.02.30](https://hackmd.io/_uploads/SJCA8T98A.png) ## 設置背景顏色 - 使用 Box 元件包裹文字，並設置背景顏色 - 設置修飾符為 `modifier.fillMaxSize().background(color = Color(0xFF101010))` ## 基本文字樣式設計 - 設置文字顏色：`color = Color.White` - 設置字體大小：`fontSize = 30.sp` ## 使用自定義字體 - 從 Google Fonts 下載字體 - 將字體文件放入 Android Studio 的 `res/font` 資料夾中 - 創建字體家族並設置字體權重 ## 使用 Font Family 設置字體 - 創建 `val fontFamily = FontFamily(...)`，將不同權重的字體添加到字體家族中 - 在 Text 元件中使用 `fontFamily = fontFamily` ## 高級文字樣式設計 - 設置字體權重：`fontWeight = FontWeight.Bold` - 設置字體樣式：`fontStyle = FontStyle.Italic` - 設置文字對齊：`textAlign = TextAlign.Center` - 設置文字裝飾：`textDecoration = TextDecoration.LineThrough` ## 使用 AnnotatedString 設計多樣式文字 - 使用 `buildAnnotatedString` 函數創建帶有多樣式的文字 - 使用 `withStyle` 函數設置部分文字的樣式 - 使用 `append` 函數添加文字內容 ## 結論 - 總結如何使用 Jetpack Compose 進行文字樣式設計 - 提供進階學習資源的推薦 ### 重點整理 - 使用 Box 元件設置背景顏色 - 基本文字樣式設計包括顏色、字體大小 - 從 Google Fonts 下載字體，並設置自定義字體 - 使用 Font Family 設置字體，並設置字體權重 - 高級文字樣式設計包括字體權重、樣式、對齊和裝飾 - 使用 AnnotatedString 設計多樣式文字 - 影片提供了豐富的文字樣式設計技巧，並推薦進階學習資源 # State ![image](https://hackmd.io/_uploads/S1hSP6cIC.png) ## 定義與背景知識 - 狀態描述了 UI 在某一時刻的樣子 - 舉例說明，通過按鈕增量計數器來解釋狀態如何影響 UI - 提及 Jetpack Compose 中的重組（Recomposition）過程 ## 創建顏色盒子組件 - 創建 `ColorBox` 可組合函數 - 設置默認修飾符 ## 設置背景顏色與點擊事件 - 使用 `modifier.background` 設置背景顏色 - 使用 `modifier.clickable` 來處理點擊事件 - 點擊事件中改變背景顏色 ## 定義狀態 - 使用 `mutableStateOf` 定義狀態 - 設置初始顏色為黃色 - 使用 `remember` 保存狀態，防止重組時重置狀態 ## 在主界面中使用 `ColorBox` - 在 `setContent` 中添加 `ColorBox` 組件 - 設置填滿屏幕的修飾符 ## 動態改變顏色盒子狀態 - 點擊顏色盒子後，背景顏色隨機變化 ## 外部狀態管理 - 增加另一個盒子，並設置其背景顏色 - 通過外部狀態管理，點擊第一個盒子改變第二個盒子的背景顏色 - 使用 `Column` 組件和 `weight` 屬性設置兩個盒子的布局 ## 結論 - 總結狀態管理的重要性 - 提及未來會介紹的其他狀態管理方法，如 ViewModel ### 重點整理 - 狀態描述了 UI 在某一時刻的樣子 - 使用 `mutableStateOf` 定義狀態，並用 `remember` 保存狀態 - 點擊事件可以改變狀態，從而觸發重組更新 UI - 外部狀態管理允許一個組件改變另一個組件的狀態 - 更複雜的應用可能需要使用 ViewModel 進行狀態管理 # Textfields, Buttons & Showing Snackbars ![image](https://hackmd.io/_uploads/rJB5ip98R.png) ## 設置 Scaffold 和 Scaffold State - 使用 Scaffold 來布局應用 - 創建 Scaffold State 以控制 Snack Bar 顯示 - 設置 Scaffold 的修飾符為 `modifier.fillMaxSize()` ## 創建文字欄位 - 使用 `TextField` 創建輸入欄位 - 創建 Text Field State 以保存輸入的文字 - 設置文字欄位的基本參數：`value` 和 `onValueChange` - 設置文字欄位的標籤和修飾符 ## 創建按鈕 - 使用 Spacer 添加文字欄位與按鈕之間的間距 - 創建按鈕並設置按鈕的點擊事件 ## 顯示 Snack Bar - 使用 Scaffold State 顯示 Snack Bar - 在按鈕的點擊事件中顯示 Snack Bar，顯示自訂消息 - 使用 Coroutine Scope 來處理 Snack Bar 的顯示，避免阻塞主線程 ## 結論 - 總結如何使用 Scaffold、文字欄位和按鈕來實現動態顯示 Snack Bar ## 重點整理 - 使用 Scaffold 來布局應用，設置 Scaffold State 控制 Snack Bar - 創建 Text Field State 保存輸入文字 - 使用 `TextField` 創建輸入欄位，設置 `value` 和 `onValueChange` - 使用 Spacer 添加間距，創建按鈕並設置點擊事件 - 在按鈕點擊事件中使用 Scaffold State 顯示 Snack Bar - 使用 Coroutine Scope 處理 Snack Bar 顯示，避免阻塞主線程 # Lists ## 介紹與概述 - 介紹影片內容，展示如何在 Jetpack Compose 中使用列表 - 強調相較於 RecyclerView，Jetpack Compose 中的列表更簡單、方便 ## 使用 Column 創建簡單列表 - 創建一個普通的 Column - 使用 for 迴圈生成 50 個項目 - 設置文字樣式和修飾符 ## 使 Column 可滾動 - 設置 Column 的修飾符為 `modifier.verticalScroll` - 創建 Scroll State 並將其應用到 Column ## 創建 Lazy Column - 使用 Lazy Column 來處理大量項目 - 移除 Column 的 `verticalScroll` 修飾符和 Scroll State - 使用 `items` 函數生成多個項目 - 使用 `itemsIndexed` 函數來處理列表項目和索引 ## 結論 - 總結 Lazy Column 的優點 - 比較 Lazy Column 和 RecyclerView 的簡便性 - 推薦更進階的 Android 課程資源 ## 重點整理 - 使用 Column 創建簡單列表，適用於少量項目 - 使用 Scroll State 使 Column 可滾動 - 使用 Lazy Column 處理大量項目，僅在滾動到特定位置時加載項目 - `items` 函數生成多個項目，`itemsIndexed` 函數處理列表項目和索引 - Lazy Column 相較於 RecyclerView 更簡便易用 # ConstraintLayout ![image](https://hackmd.io/_uploads/rJBudRcIR.png) ## 添加 ConstraintLayout 依賴 - 打開 Gradle 文件，添加依賴 - 依賴範例： ```groovy implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0" ``` - 同步 Gradle ## 創建 ConstraintSet - 使用 ConstraintSet 定義約束條件 - 創建參考，並設置約束 ## 創建簡單的 ConstraintLayout - 創建 `ConstraintSet` 並設置參考 - 使用 `constrain` 函數設置約束條件 ## 創建綠色和紅色盒子 - 設置綠色盒子的約束：頂部和起始位置對齊父容器 - 設置紅色盒子的約束：頂部對齊父容器，起始位置對齊綠色盒子的結束位置 - 設置盒子的寬度和高度 ## 應用 ConstraintSet 到 ConstraintLayout - 創建 ConstraintLayout，並應用剛剛定義的 ConstraintSet - 設置 ConstraintLayout 的修飾符 ## 顯示和測試 - 測試顯示兩個盒子 - 調整紅色盒子的約束，檢查效果 ## 創建水平鏈 - 使用 `createHorizontalChain` 函數創建水平鏈 - 設置鏈樣式，例如 `ChainStyle.Packed` ## 使用指南線 - 創建指南線，並設置位置 - 將綠色盒子的頂部約束到指南線 ## 總結 - 建議在簡單佈局中使用 Row 和 Column - 在複雜佈局中使用 ConstraintLayout 可以提高效率 ### 重點整理 - 添加 ConstraintLayout 依賴到 Gradle - 使用 ConstraintSet 定義約束條件 - 創建參考，並設置約束 - 創建 ConstraintLayout，並應用 ConstraintSet - 創建水平鏈和指南線 - 建議在簡單佈局中使用 Row 和 Column # Simple Animations ![image](https://hackmd.io/_uploads/rkFxyniIR.png) ## 建立一個可動畫的方塊 - 創建一個方塊並設置其大小和背景顏色 - 添加一個按鈕，點擊按鈕時增加方塊的大小並進行動畫 ## 初始設置 - 使用 `modifier` 設置方塊的大小為 200 dp，背景顏色為紅色 - 將按鈕放置在方塊內，按鈕文字為 "Increase Size" ## 使用 State 進行動畫 - 創建 `sizeState` 來表示方塊的當前大小，初始值為 200 dp - 將 `sizeState` 賦值給方塊的 `size` 修飾符 - 在按鈕的 `onClick` 函數中，每次點擊增加 `sizeState` 的值 50 dp ## 添加動畫 - 創建一個 `size` 變量，使用 `animateDpAsState` 函數進行動畫 - 將 `size` 賦值給方塊的 `size` 修飾符 - 重新啟動應用，點擊按鈕，可以看到方塊大小的平滑變化 ## 自定義動畫參數 - 使用 `tween` 設置動畫持續時間、延遲和曲線 - 設置動畫持續時間為 3 秒，延遲 300 毫秒 - 使用預設的 `easing` 曲線 ## 彈性動畫 - 使用 `spring` 進行彈性動畫 - 設置 `dampingRatio` 為 `Spring.DampingRatioHighBouncy` - 保持 `stiffness` 和 `visibilityThreshold` 默認值 ## 使用關鍵幀自定義動畫 - 使用 `keyframes` 函數創建自定義關鍵幀動畫 - 設置動畫持續時間為 5 秒 - 在不同的時間點設置不同的大小值和曲線 ## 無限動畫 - 創建一個 `infiniteTransition` 狀態來進行無限動畫 - 動畫顏色從紅色變為綠色 - 使用 `tween` 設置動畫持續時間為 2 秒，並設置重複模式為 `RepeatMode.Reverse` # How to Make an Animated Circular Progress Bar ![image](https://hackmd.io/_uploads/BJ6WLhiLC.png) ## 簡介 - 歡迎觀看本影片，將展示如何在Jetpack Compose中製作進度條。 - Jetpack Compose中有預設的CircularProgressIndicator，但缺乏圓滑的末端，因此將展示如何使用Canvas製作自定義進度條。 - 將學習Canvas和Jetpack Compose的應用，同時實現動畫效果。 ## 設定專案 - 開始於一個空的Compose專案，移除預設的Theme和Composables。 - 將創建一個名為`circularProgressBar`的Composable，並接受多個參數： - `percentage`：浮點數，表示進度條填滿的百分比。 - `number`：整數，表示進度條滿100%時的數值。 - `fontSize`：文字大小，預設28sp。 - `radius`：圓的半徑，預設50dp。 - `color`：進度條的顏色，預設為綠色。 - `strokeWidth`：進度條的寬度，預設8dp。 - `animationDuration`：動畫持續時間，預設1秒。 - `animationDelay`：動畫延遲時間，預設0。 ## 實現動畫效果 - 定義一個布林值狀態`animationPlayed`，表示動畫是否已經播放。 - 使用`animateFloatAsState`函數來實現浮點數動畫。 - 動畫目標值為`percentage`，初始值為0。 - 使用`tween`來設置動畫的持續時間和延遲時間。 - 使用`LaunchedEffect`來確保動畫僅在第一次組成時觸發。 ## 實現進度條顯示 - 使用`Box`來容納進度條和文字，並將內容對齊設置為中心。 - 使用`Canvas`來繪製自定義進度條： - 設置Canvas的大小為圓的半徑的兩倍。 - 使用`drawArc`函數來繪製圓弧： - 設置顏色為傳入的顏色。 - 起始角度為-90度。 - 掃描角度為360乘以當前百分比。 - `useCenter`設置為false，僅繪製圓弧的邊界。 - 設置圓弧的樣式為`Stroke`，並將末端設置為圓滑。 ## 顯示動畫文字 - 在Canvas下方使用`Text`來顯示當前數值： - 計算當前數值為`currentPercentage`乘以`number`。 - 設置文字顏色為黑色，字體大小為傳入的字體大小，字體加粗。 ## 測試效果 - 在`setContent`中調用`circularProgressBar`，並傳入測試數值： - 設置百分比為80，最大數值為100。 - 重新啟動應用，觀察動畫效果，檢查進度條和文字是否正確顯示和動畫。 # [How to Make a Draggable Music Knob](https://hackmd.io/3mvkgY0jQ_yDWzYjULzLOg) ![image](https://hackmd.io/_uploads/r1NgJB68C.png) # Making a Meditation UI ![image](https://hackmd.io/_uploads/HJnARNTU0.png) # 快捷鍵 ctrl + p # 外部資源 * [Layouts En Jetpack Compose](https://www.develou.com/android-layouts-en-jetpack-compose/) * [Jetpack Compose for Views developers — LinearLayout](https://blog.protein.tech/jetpack-compose-for-views-developers-part-01-linearlayout-294b8d90b3c4) * [jetpack-compose-awesome](https://p.codekk.com/detail/Android/jetpack-compose/jetpack-compose-awesome) * [Jetpack Compose Layouts: Crafting with Column and Row](https://medium.com/@esthcarelle/jetpack-compose-layouts-crafting-with-column-and-row-117d51761d63) * [Jetpack Compose: Container Layout](https://levelup.gitconnected.com/jetpack-compose-container-layout-183e655518f2) * [Understand Arrangement and Alignment in Jetpack Compose](https://vitor-ramos.medium.com/understand-arrangement-and-alignment-in-jetpack-compose-7633f2ed5b39) * [Flow layouts in Compose](https://developer.android.com/develop/ui/compose/layouts/flow) # 待研究 Modifiers # 關鍵字 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **Kotlin**：一種現代化的編程語言，取代了 Java 作為 Android 開發的首選語言。 - **Canary Build**：Android Studio 的一個實驗版本，包含最新的功能和變更，供開發者試用和反饋。 - **Beta**：表示軟件已經過初步測試，功能相對穩定，不會有重大 API 變更。 - **Stable Channel**：穩定版本的 Android Studio，適合日常開發使用。 - **Set Content**：在 Jetpack Compose 中用於設置界面的函數，類似於傳統的 `setContentView`。 - **Composable**：在 Jetpack Compose 中代替 View 的概念，標註為可組合的 UI 元件。 - **Function Annotation**：用於標註 Kotlin 函數，使其具有特定功能或行為，例如 `@Composable`。 - **Preview**：在 Android Studio 中用於預覽 Composable 的功能，無需啟動整個應用程序。 - **Layout Folder**：存放 XML 文件的資料夾，在 Jetpack Compose 中已不再使用。 - **Activity**：Android 應用中的基本組成單位，每個 Activity 都有自己的生命周期。 - **Gradle**：一種用於自動化構建的工具，常用於 Android 開發中。 - **Text**：Jetpack Compose 中的內建 Composable，用於顯示文本。 - **Theme**：用於設置應用程序的統一風格和外觀。 - **Binary Folder (bin folder)**：存放可執行文件的資料夾。 - **MainActivity**：應用程序的主活動，通常是用戶打開應用程序時看到的第一個界面。 - **Component**：在 UI 設計中，指可重用的界面元素。 - **Web Development**：網頁開發，設計和構建網站的過程。 - **Flutter**：另一種使用 Dart 語言的跨平台 UI 工具包，與 Jetpack Compose 類似。 - **Boilerplate Code**：重複且常見的程式碼片段，在新系統或應用開發中通常需要大量編寫。 - **Modifiers**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **Composable**：在 Jetpack Compose 中代替 View 的概念，標註為可組合的 UI 元件。 - **Column**：Jetpack Compose 中的一種佈局，將元素垂直堆疊。 - **Row**：Jetpack Compose 中的一種佈局，將元素水平排列。 - **Text**：Jetpack Compose 中的內建 Composable，用於顯示文本。 - **Padding**：用於在容器內部四周留出空白區域，推動內容到容器中間。 - **Offset**：用於將元素偏移特定的水平和垂直距離，類似於 Margin 但不會影響其他元素的位置。 - **FillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **FillMaxWidth**：Modifier 的一種，用於填滿可用寬度。 - **FillMaxHeight**：Modifier 的一種，用於填滿可用高度。 - **Width**：Modifier 的一種，用於設置元素的固定寬度。 - **Height**：Modifier 的一種，用於設置元素的固定高度。 - **RequiredWidth**：Modifier 的一種，強制元素的寬度設置為指定的寬度，即使超過父容器的寬度。 - **RequiredHeight**：Modifier 的一種，強制元素的高度設置為指定的高度，即使超過父容器的高度。 - **Border**：用於給元素添加邊框，邊框寬度和顏色可以自定義。 - **Color**：用於設置顏色，可以設置背景顏色、邊框顏色等。 - **Clickable**：Modifier 的一種，使元素可點擊，並觸發相應的 lambda 函數。 - **Draggable**：Modifier 的一種，使元素可拖動，實現拖放功能。 - **Zoomable**：Modifier 的一種，使元素可縮放。 - **Scrollable**：Modifier 的一種，使元素可滾動。 - **Spacer**：一種特殊的 Composable，用於在佈局中添加空白區域，設置寬度或高度。 - **Lambda Function**：匿名函數，常用於事件處理和回調，例如 onClick 事件。 - **Sequentially Applied**：指 Modifier 中的屬性是按順序應用的，可以依次應用多個屬性。 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **Composable**：在 Jetpack Compose 中代替 View 的概念，標註為可組合的 UI 元件。 - **ImageCard**：一種自定義的 Composable，用於顯示帶有圖片和文字的卡片。 - **Modifier**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **Painter**：在 Jetpack Compose 中用於繪製圖片的對象。 - **Content Description**：用於無障礙設計，為屏幕閱讀器提供的文本描述。 - **FillMaxWidth**：Modifier 的一種，用於填滿可用寬度。 - **FillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **Padding**：用於在容器內部四周留出空白區域，推動內容到容器中間。 - **Box**：Jetpack Compose 中的一種佈局，用於堆疊內容，允許在其內部對齊內容。 - **ContentAlignment**：用於設置 Box 內部內容的對齊方式，例如底部左對齊（Bottom Start）。 - **RoundedCornerShape**：用於設置卡片或其他元素的圓角形狀。 - **Elevation**：用於設置卡片的陰影效果。 - **TextStyle**：用於設置文字樣式，包括顏色、字體大小等。 - **Color**：用於設置顏色，可以設置背景顏色、邊框顏色等。 - **Brush**：用於創建漸變背景，例如垂直漸變（Vertical Gradient）。 - **dp (Density-independent Pixels)**：一種設計單位，與設備的像素密度無關，保證在不同設備上顯示一致。 - **sp (Scale-independent Pixels)**：一種設計單位，用於字體大小，隨用戶設置的字體大小偏好縮放。 - **Drawable Resource**：存放圖片資源的文件夾，例如 `drawable` 文件夾中的圖片。 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **Composable**：在 Jetpack Compose 中代替 View 的概念，標註為可組合的 UI 元件。 - **Modifier**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **Box**：Jetpack Compose 中的一種佈局，用於堆疊內容，允許在其內部對齊內容。 - **Color**：用於設置顏色，可以設置背景顏色、文字顏色等。 - **fillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **fontFamily**：用於設置文字的字體家族，可以包括不同字重的字體。 - **fontWeight**：用於設置文字的字重，例如粗體、細體等。 - **fontStyle**：用於設置文字的樣式，例如斜體。 - **textAlign**：用於設置文字的對齊方式，例如居中對齊。 - **textDecoration**：用於設置文字的裝飾效果，例如刪除線或底線。 - **Annotated String**：一種字符串，用於在同一段文字中應用不同的樣式。 - **Span Style**：用於設置 Annotated String 中的樣式，可以應用不同的顏色、字體大小等。 - **Hexadecimal Color**：十六進制顏色碼，用於精確指定顏色。 - **append**：用於在 Annotated String 中添加字符或字符串。 - **withStyle**：用於在 Annotated String 中應用特定樣式。 - **State**：在 Jetpack Compose 中，描述 UI 在特定時刻的狀態，允許 UI 隨著狀態的改變而更新。 - **UI State**：用於描述 UI 在某一時刻的整體外觀及其數據。 - **Recomposing**：在 Jetpack Compose 中，當狀態改變時，重新繪製 UI 組件的過程。 - **Composable**：在 Jetpack Compose 中代替 View 的概念，標註為可組合的 UI 元件。 - **MutableState**：一種可變狀態，用於在 Jetpack Compose 中管理和追踪狀態變化。 - **remember**：Jetpack Compose 中的一個函數，用於記住狀態，使其在重組成時不會被重置。 - **Box**：Jetpack Compose 中的一種佈局，用於堆疊內容，允許在其內部對齊內容。 - **Modifier**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **fillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **background**：Modifier 的一種，用於設置背景顏色。 - **Clickable**：Modifier 的一種，使元素可點擊，並觸發相應的 lambda 函數。 - **Color**：用於設置顏色，可以設置背景顏色、文字顏色等。 - **Random**：用於生成隨機數的類，可以用於生成隨機顏色。 - **Column**：Jetpack Compose 中的一種佈局，將元素垂直堆疊。 - **Weight**：用於分配空間的屬性，使佈局中的元素根據權重比例分配可用空間。 - **Lambda Function**：匿名函數，常用於事件處理和回調，例如 onClick 事件。 - **External State**：在組件之外管理的狀態，通常在父組件中定義並傳遞給子組件。 - **Internal State**：在組件內部管理的狀態。 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **State**：在 Jetpack Compose 中，描述 UI 在特定時刻的狀態，允許 UI 隨著狀態的改變而更新。 - **Scaffold**：一種佈局結構，用於包含和管理常見的應用組件，如 AppBar、BottomBar、FloatingActionButton、Drawer 和 Snackbar。 - **Snackbar**：一種短暫出現的消息提示，通常顯示在應用的底部，用於向用戶提供簡短的反饋信息。 - **Column**：Jetpack Compose 中的一種佈局，用於將子組件垂直堆疊。 - **TextField**：Jetpack Compose 中的文本輸入框，用於接收用戶輸入。 - **OutlinedTextField**：具有邊框的文本輸入框，遵循 Material Design 指南。 - **BasicTextField**：基礎文本輸入框，沒有任何樣式或提示，需要自行設計。 - **Modifier**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **fillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **background**：Modifier 的一種，用於設置背景顏色。 - **padding**：用於設置內邊距。 - **Button**：Jetpack Compose 中的按鈕組件，用於觸發用戶操作。 - **Spacer**：一種特殊的 Composable，用於在佈局中添加空白區域。 - **CoroutineScope**：Kotlin 中的一個範圍，用於啟動和管理協程。 - **Coroutine**：Kotlin 中的一種輕量級的並發工具，用於進行異步操作。 - **launch**：CoroutineScope 中的一個函數，用於啟動一個新的協程。 - **suspend function**：Kotlin 中的一種特殊函數，用於協程中，可以掛起並恢復執行。 - **Delegate**：Kotlin 中的一種屬性委託，用於簡化屬性的讀寫操作。 - **by remember**：用於記住狀態，使其在重組成時不會被重置。 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **Column**：Jetpack Compose 中的一種佈局，用於將子組件垂直堆疊。 - **LazyColumn**：Jetpack Compose 中的一種佈局，類似於 RecyclerView，能夠懶加載項目，即僅在需要顯示時才加載項目。 - **LazyRow**：Jetpack Compose 中的一種佈局，用於橫向懶加載項目。 - **Modifier**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **fillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **verticalScroll**：Modifier 的一種，使 Column 能夠垂直滾動。 - **scrollState**：用於管理滾動位置的狀態。 - **remember**：Jetpack Compose 中的一個函數，用於記住狀態，使其在重組成時不會被重置。 - **Text**：Jetpack Compose 中的文字組件，用於顯示文本。 - **fontSize**：用於設置文字的字體大小。 - **fontWeight**：用於設置文字的字重，例如粗體、細體等。 - **textAlign**：用於設置文字的對齊方式，例如居中對齊。 - **dp (Density-independent Pixels)**：一種設計單位，與設備的像素密度無關，保證在不同設備上顯示一致。 - **sp (Scale-independent Pixels)**：一種設計單位，用於字體大小，隨用戶設置的字體大小偏好縮放。 - **items**：LazyColumn 中的一個函數，用於指定要顯示的項目數量和內容。 - **itemsIndexed**：LazyColumn 中的一個函數，用於同時獲取項目索引和項目內容，類似於 `forEachIndexed`。 - **index**：列表中的索引位置，用於指示當前項目的位置。 - **composable**：在 Jetpack Compose 中用於組合和展示 UI 的函數。 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **ConstraintLayout**：一種強大的佈局方式，允許在 Android 應用中建立複雜的佈局關係。 - **Dependency**：依賴庫，在這裡指的是需要在 Gradle 文件中添加的 ConstraintLayout 庫。 - **ConstraintSet**：一組約束條件，用於描述組件之間的佈局關係。 - **createRefFor**：用於創建參考，對應於 ConstraintLayout 中的每個組件。 - **constrain**：用於設置約束條件，指定某個組件的約束方式。 - **top、start、end**：ConstraintLayout 中的屬性，用於指定組件的上、左、右邊約束。 - **parent**：ConstraintLayout 的父容器，用於指定組件與父容器的約束關係。 - **Dimension**：用於設置組件的尺寸，可以設置為固定值、百分比、包裹內容或充滿約束。 - **fillToConstraints**：Dimension 的一種，用於讓組件充滿約束之間的空間。 - **LayoutId**：用於指定組件的 ID，使其能夠在 ConstraintLayout 中被引用。 - **createHorizontalChain**：用於創建水平方向的約束鏈。 - **createVerticalChain**：用於創建垂直方向的約束鏈。 - **chainStyle**：鏈條的樣式，可以設置為 spread（分散）、packed（緊湊）或 spreadInside（內部分散）。 - **guideline**：用於在 ConstraintLayout 中創建參考線，可以是水平或垂直的。 - **fraction**：用於指定 guideline 的位置，按百分比計算。 - **dp (Density-independent Pixels)**：一種設計單位，與設備的像素密度無關，保證在不同設備上顯示一致。 - **Jetpack Compose**：一種用於設計原生 Android 應用的新方法，使用 Kotlin 來代替傳統的 XML 設計界面。 - **State**：在 Jetpack Compose 中，描述 UI 在特定時刻的狀態，允許 UI 隨著狀態的改變而更新。 - **remember**：Jetpack Compose 中的一個函數，用於記住狀態，使其在重組成時不會被重置。 - **MutableState**：一種可變狀態，用於在 Jetpack Compose 中管理和追踪狀態變化。 - **Box**：Jetpack Compose 中的一種佈局，用於堆疊內容，允許在其內部對齊內容。 - **Modifier**：在 Jetpack Compose 中用於修改 Composable 外觀和行為的屬性，可以設置大小、背景色、邊框、偏移量等。 - **fillMaxSize**：Modifier 的一種，用於填滿可用空間。 - **background**：Modifier 的一種，用於設置背景顏色。 - **Button**：Jetpack Compose 中的按鈕組件，用於觸發用戶操作。 - **Text**：Jetpack Compose 中的文字組件，用於顯示文本。 - **animateDpAsState**：Jetpack Compose 中的一個函數，用於將 dp 單位的值進行動畫過渡。 - **animationSpec**：動畫規範，用於配置動畫的細節，例如持續時間、延遲和曲線。 - **tween**：一種動畫規範，提供簡單的動畫曲線，可設置持續時間和延遲。 - **spring**：一種動畫規範，模擬彈簧效果的動畫，可設置阻尼比和剛度。 - **keyframes**：一種動畫規範，允許定義動畫的關鍵幀和每幀的值和持續時間。 - **infiniteTransition**：Jetpack Compose 中的一種狀態，用於創建無限循環的動畫。 - **animateColor**：Jetpack Compose 中的一個函數，用於將顏色值進行動畫過渡。 - **infiniteRepeatable**：一種動畫規範，允許動畫無限循環播放。 - **repeatMode**：設置動畫的重複模式，可以是 `Restart` 或 `Reverse`。 - **Jetpack Compose**：Google 推出的現代化 UI 工具包，用於構建 Android 應用程序的用戶界面。 - **CircularProgressIndicator**：Jetpack Compose 中的預設圓形進度指示器組件，但它的圓形端點是切齊的，不是圓角。 - **Canvas**：一個用於繪製自定義形狀的 Jetpack Compose 組件，可以實現高度定制化的 UI。 - **Composables**：Jetpack Compose 的基本單元，用於描述應用的 UI 元素。 - **remember**：Jetpack Compose 中用於記住組件狀態的函數。 - **immutable state**：不可變狀態，用於儲存不會變更的值。 - **animateFloatAsState**：用於在 Jetpack Compose 中動畫化浮點數值的函數。 - **launchEffect**：Jetpack Compose 中用於在組件首次組成時觸發副作用的函數。 - **Box**：一個 Jetpack Compose 組件，用於將其他組件組織在一起並進行對齊。 - **drawScope**：Canvas 繪圖範圍，用於定義在 Canvas 中繪製的內容。 - **drawArc**：Canvas 繪圖函數，用於繪製圓弧形狀。 - **stroke**：定義繪圖的邊緣樣式，如寬度、圓角等。 - **Jetpack Compose**：Google 推出的現代化 UI 工具包，用於構建 Android 應用程序的用戶界面。 - **Canvas**：一個用於繪製自定義形狀的 Jetpack Compose 組件，可以實現高度定制化的 UI。 - **Composables**：Jetpack Compose 的基本單元，用於描述應用的 UI 元素。 - **remember**：Jetpack Compose 中用於記住組件狀態的函數。 - **mutableStateOf**：Jetpack Compose 中用於創建可變狀態的函數。 - **onGloballyPositioned**：Jetpack Compose 中的一個回調函數，用於在組件位置確定後獲取其坐標。 - **PointerInputFilter**：Jetpack Compose 中用於處理觸控事件的函數。 - **MotionEvent**：表示觸控事件的類，包含觸控位置等信息。 - **atan2**：反正切函數，用於計算兩點之間的角度。 - **radians**：弧度，一種角度表示方式，與度數不同。 - **degrees**：度數，常見的角度表示方式。 - **trigonometry**：三角函數，數學領域的一部分，用於處理角度和距離計算。 - **action down**：觸控事件的類型，表示用戶開始觸摸屏幕。 - **action move**：觸控事件的類型，表示用戶在屏幕上移動觸點。 - **rotation state**：表示旋轉狀態的變量，用於保存當前旋轉角度。 - **fixed angle**：修正後的角度，用於解決跨越 180 度到 -180 度時的角度連續性問題。 - **modifiers**：Jetpack Compose 中的修飾符，用於調整組件的外觀和行為。 - **Box**：一個 Jetpack Compose 組件，用於將其他組件組織在一起並進行對齊。 - **Row**：一個 Jetpack Compose 組件，用於水平排列子組件。 - **fillMaxSize**：一個修飾符，用於使組件填滿父容器的最大尺寸。 - **background color**：背景顏色，用於設置組件的背景顏色。 - **corner radius**：圓角半徑，用於設置矩形的圓角。 - **percent**：百分比值，用於表示音量旋鈕的旋轉百分比。 - **value change listener**：值變化監聽器，用於響應旋鈕值的變化。