---
# System prepended metadata

title: '[Video Note] [Android] [Jetpack Compose] Philipp Lackner - Android Jetpack Compose'
tags: [Jetpack Compose, Android, Video Note]

---

# 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**：值變化監聽器，用於響應旋鈕值的變化。