### 響應式設計的基本原則
* 分析 mockup，先拆解成可重複使用的獨立 UI 元件（如按鈕、欄位）
* 結構改變需使用 Window Size Class，大小改變可靠動態尺寸與 Modifier 解決
* 避免以 if-else 決定所有畫面分支，重複代碼低效又難維護
* 同樣結構但排版不同的情況，如 Column 改 Row，需以條件控制 layout
### 尺寸變化處理策略
* 使用 Modifier 搭配 relative 單位（如 fillMaxWidth, weight, maxWidth）
* 不需針對每種裝置設定尺寸，只要保持 layout 自適應即可
* 若只是欄位寬度變化，無需切換 UI 結構
### 結構變化處理策略
* 畫面結構不同（如橫向變 row），需判斷 Window Size Class
* 利用 Compact / Medium / Expanded 判斷畫面寬度類型決定 UI 排版邏輯
* 控制如 Header 對齊方式（左對齊 vs 置中）也需透過這類邏輯調整
### UI 拆解策略
* 可重用元件如按鈕、TextField 先獨立出來，方便全專案共用
* 每個畫面組成元件應模組化，避免複製貼上
* 重構範例：Header 段落為兩行文字，用 Column 包住，對齊方式參數化
### 按鈕元件設計（NotemarkButton）
* 使用 Material 3 Button，設定 primary container color
* 提供文字、onClick、Modifier 參數
* 套用自定義圓角與間距
* 使用 MaterialTheme.typography.titleSmall 控制字型樣式
### 輸入欄位元件設計（NotemarkTextField）
* 基於 OutlinedTextField，封裝 label、hint、文字變更等基本參數
* 支援密碼欄位顯示與切換可視狀態，使用本地狀態控制
* 密碼遮罩使用 asterisk，非預設圓點樣式
* 動態設定顏色，如聚焦邊框顏色、背景顏色、游標顏色
* 支援自定 trailingIcon，控制密碼可見性切換
### 設計系統與架構實踐
* 共用元件集中於 designSystem 套件（如 NotemarkButton、NotemarkTextField）
* 統一使用 MaterialTheme 設定的 colorScheme 與 typography
* TextField 支援 placeholder 與內容共用樣式，維持一致性
* 狀態邏輯單純的交互元件（如密碼可視切換）可直接在 composable 實作
### 工具與依賴說明
* Compose Multiplatform 支援 Material 3 與 Material Icons Extended
* 引入 `compose.material.icons.extended` 以使用預設 visibility icon
* 所有字型、顏色設計由主題檔定義，維持與 Figma Mockup 一致
### 建立可重用的 Link 元件
* 在 `designSystem` 中新增 `NotemarkLink` 元件
* 使用 `Text` composable 搭配 `clickable` modifier 處理點擊事件
* 設定 `textStyle` 為 `MaterialTheme.typography.titleSmall`
* 設定顏色為 primary、文字對齊為置中
---
### 準備畫面結構與 scaffold 設定
* 使用 `Scaffold` 作為根 composable 處理 Window Insets
* 以 `Modifier.fillMaxSize()` 填滿整個畫面
* 僅使用 `WindowInsets.statusBars`，避免底部導覽列被覆蓋
* 使用 `consumeWindowInsets` 搭配 `WindowInsets.navigationBars` 保留底部空間
---
### Header 區塊拆分為獨立 Composable
* 抽出 `LoginHeaderSection` 作為可重用組件
* 內部使用 `Column` 包含「Login」標題與描述文字
* 描述字體為 `bodyLarge`，標題字體為 `titleLarge`
* 可依據畫面尺寸改變文字對齊（未來支援）
---
### 建立 Login 表單區塊
* 抽出 `LoginFormSection`，接收 email/password 狀態與變更函式
* 使用 `NotemarkTextField` 顯示 email 與 password 欄位
* 設定對應 label/hint 與 `isInputSecret` 控制密碼隱藏顯示
* 使用 `Spacer` 控制欄位間距（16dp）
* 按鈕使用 `NotemarkButton`，文字為 "Log in"
* 底部使用 `NotemarkLink` 顯示註冊提示並置中對齊
---
### 管理 State 與狀態綁定
* 使用 `remember` 管理 email/password 狀態變數
* 將狀態值與更新函式傳遞至 `LoginFormSection`
* 密碼欄位內部管理 `isPasswordVisible` 狀態切換顯示密文/明文
---
### UI 微調與排版優化
* 使用 `Modifier.fillMaxWidth()` 確保 TextField 寬度正確
* 加入 `Arrangement.spacedBy(32.dp)` 增加區塊間距
* 調整 Padding，移除過多的 top padding 適應 mobile portrait
* 優化密碼切換圖示邏輯：根據 `isPasswordVisible` 切換 visibility icon
---
### 設計考量與後續擴充點
* 每個 composable 分離管理，便於之後支援 tablet、橫向畫面
* 所有顏色、樣式均來自 MaterialTheme，與設計稿一致
* Responsive 邏輯可依 Window Size Class 擴充至 LoginScreen 中不同佈局排列
* 使用 Scaffold + Surface 結合背景色切割畫面區域，模擬 bottom sheet 視覺效果
---
### 新增適應式依賴與 Window Size Class
* 在 `libs.versions.toml` 引入 Material3 Adaptive 1.1.1
* 使用 `windowSizeClass` 取得寬度與高度級別 (Compact / Medium / Expanded)
* 僅尺寸差異用動態 Modifier 處理，結構差異才判斷 size class
### 建立 DeviceConfiguration 列舉
* Mobile 直向：寬 Compact、高 Medium
* Mobile 橫向：寬 Expanded、高 Compact
* Tablet 直向：寬 Medium、高 Expanded
* Tablet 橫向：寬 Expanded、高 Medium
* 其他組合視為 Desktop
### 依組態切換根版面
* Mobile 直向：Column 排版，元素填滿寬度
* Mobile 橫向：Row 排版，左右各佔 50%，加 `displayCutout` padding
* Tablet / Desktop：Column 排版置中，`widthIn(max = 540.dp)`，Header 文字置中
### 版面微調與 Modifier
* `weight()` 平均分配寬度
* `widthIn(max = ...)` 控制平板與桌面最大內容寬度
* `verticalScroll` 處理高度不足
* `displayCutout` 與 `navigationBars` Insets 避免瀏海和底部列遮擋
### 元件重用策略
* Header、Form、Button、TextField、Link 抽為獨立 composable
* Layout 僅負責排版，元件不感知 size class
* 使用 `MaterialTheme` 顏色與字型保持統一風格
### 響應式設計心法
* 優先使用相對單位處理純尺寸變化
* 結構或對齊差異時才使用 Window Size Class
* 避免大量 if‑else 重複畫面，透過 enum + when 切換根排版
* 測試各裝置方向，確保無遮擋且可捲動
# 選擇題
1. 下列哪個 Compose API 可用於調整元件最大寬度？
A. fillMaxSize()
B. maxWidth()
C. widthIn()
D. size()
**答案：C**
2. 在 Jetpack Compose 中要取得目前視窗尺寸類別，應使用哪個 API？
A. WindowWidth()
B. rememberWindowSizeClass()
C. currentWindow()
D. getScreenSizeClass()
**答案：B**
3. Compact WindowSizeClass 代表？
A. 平板橫式
B. 電視畫面
C. 手機直式
D. 手機橫式
**答案：C**
4. 若 UI 僅尺寸變動，但排版不變，建議使用什麼技術？
A. windowSizeClass
B. 多重 if 判斷
C. 相對單位與 weight
D. ConstraintLayout
**答案：C**
5. 若 UI 排版結構因螢幕寬度改變，建議使用？
A. Column + Spacer
B. windowSizeClass
C. Padding 調整
D. LazyColumn
**答案：B**
6. 在 landscape 模式中，元件排版建議？
A. 一律使用 Column
B. 使用 FlowRow
C. 改用 Row 排列元件
D. 使用 Box 重疊顯示
**答案：C**
7. 若想根據寬度調整對齊方式，應該使用？
A. widthModifier
B. when 判斷 window size class
C. alignSelf()
D. fixedPadding()
**答案：B**
8. Compose 中 weight 修飾符主要用於？
A. 設定對齊
B. 調整高度
C. 計算佔比寬度
D. 設定邊框
**答案：C**
9. Compose 中想限制元件最大寬度，應用哪個修飾符？
A. fillMaxWidth()
B. widthIn(max = x.dp)
C. maxWidth()
D. sizeIn()
**答案：B**
10. 設計響應式 UI 時，最應避免的做法是？
A. 抽離可重用 Composable
B. 依畫面尺寸分類結構
C. 為每種尺寸複製整個畫面程式碼
D. 使用相對單位與 padding
**答案：C**
11. 若希望某欄位僅在平板時置中對齊，應使用？
A. Modifier.center()
B. TextAlign.Center + windowSizeClass 判斷
C. forceAlign()
D. setCenterOnTablet()
**答案：B**
12. Compose 中要放置 text 和 TextField 的組合常見做法是？
A. LazyRow
B. Column
C. Scaffold
D. Box
**答案：B**
13. 在 Composable 中設置 padding 應使用哪個修飾符？
A. Modifier.margin()
B. Modifier.spacing()
C. Modifier.padding()
D. Modifier.indent()
**答案：C**
14. 為何要將按鈕與文字欄位封裝進 DesignSystem package？
A. 易於被垃圾回收
B. 支援多語系
C. 方便重用與維護
D. 可加快 RenderSpeed
**答案：C**
15. TextField 預設使用的樣式是？
A. PlainTextField
B. OutlinedTextField
C. MaterialEditText
D. ComposeTextBox
**答案：B**
16. 顯示密碼時用到哪個 transformation？
A. VisualTransformation.None
B. MaskTransformation
C. AsteriskTransformation
D. PasswordVisualTransformation
**答案：D**
17. 想將輸入文字轉為星號符號，應使用？
A. CharMaskTransformer
B. VisualTransformation.Asterisk
C. PasswordVisualTransformation('\*')
D. HiddenFieldTransformer
**答案：C**
18. OutlineTextField 的 focused border color 可自定為？
A. MaterialTheme.colorScheme.primary
B. BorderColor.Focused
C. MaterialColor.Blue
D. Modifier.borderColor()
**答案：A**
19. 若不希望 TextField 背景顏色，在 focused 狀態下應設為？
A. Color.White
B. Color.Gray
C. Color.Transparent
D. Null
**答案：C**
20. 對於會重複出現的 UI 組件，正確做法為？
A. 每次寫新的
B. 使用 copy-paste
C. 抽成 Composable
D. 改寫為 XML
**答案：C**
21. Compose 中設定元件形狀為圓角應使用？
A. RoundedCornerShape(x.dp)
B. BorderRadius(x)
C. CornerDp(x)
D. Radius.dp(x)
**答案：A**
22. Compose 的 Button 預設內容為？
A. 文字與 Icon
B. Text()
C. No content
D. ButtonView()
**答案：B**
23. 密碼欄的右側可加哪個 icon 提供可見切換？
A. PasswordToggleIcon
B. Visibility
C. PasswordEye
D. ShowHide
**答案：B**
24. TextField 欄位中用於提示輸入文字的屬性為？
A. label
B. hint
C. placeholder
D. supportText
**答案：C**
25. 若要支援 TextField 的 error 狀態應使用？
A. isError
B. supportText
C. errorLabel
D. borderColor.Red
**答案：A**
26. password toggle icon 的行為應放在哪裡？
A. ViewModel
B. Composable 本體
C. Scaffold
D. NavHost
**答案：B**
27. Compose 中 TextStyle 使用方式為？
A. FontStyle = textTheme.body
B. style = MaterialTheme.typography.bodyLarge
C. font = ComposeFont.bodyMedium
D. theme = TextThemes.Default
**答案：B**
28. `TrailingIcon` 通常用來處理？
A. 輸入格式驗證
B. 按鈕動畫
C. 顯示額外功能 icon
D. 控制 UI 尺寸
**答案：C**
29. 若使用者尚未輸入文字，可透過哪個屬性顯示預設提示？
A. label
B. text
C. placeholder
D. hint
**答案：C**
30. 畫面元件的排版與結構應根據什麼調整？
A. 屏幕 DPI
B. 使用者語言
C. 視窗尺寸類別
D. 裝置記憶體大小
**答案：C**
1. 建立 NotemarkLink 元件時，應使用哪個組件實現點擊功能？
A. Box
B. Text
C. Column
D. Spacer
**答案：B**
2. NotemarkLink 中使用哪個 Modifier 讓文字可點擊？
A. selectable()
B. enabled()
C. clickable()
D. focusable()
**答案：C**
3. 要設定文字樣式為標題小字，應使用哪個樣式？
A. MaterialTheme.typography.bodySmall
B. MaterialTheme.typography.titleSmall
C. MaterialTheme.typography.caption
D. MaterialTheme.typography.headlineSmall
**答案：B**
4. 登入畫面中，哪個 Composable 最常用來處理狀態列與導航列的間距？
A. Column
B. Scaffold
C. Box
D. LazyColumn
**答案：B**
5. 使用 Scaffold 時，應提供哪個 Modifier 以填滿整個畫面？
A. fillMaxSize()
B. matchParentSize()
C. expandAll()
D. fullWidth()
**答案：A**
6. 使用 Scaffold 時獲得內部 padding 的變數名稱是？
A. padding
B. windowInsets
C. innerPadding
D. safeAreaPadding
**答案：C**
7. 登入畫面預設先建立哪個裝置方向的版面？
A. 平板橫式
B. 手機橫式
C. 手機直式
D. 桌機視窗
**答案：C**
8. Header 區塊中，主標題與描述文字應放在哪個容器中？
A. Box
B. Row
C. LazyColumn
D. Column
**答案：D**
9. 描述文字樣式應使用哪一種？
A. titleLarge
B. labelSmall
C. bodyLarge
D. displaySmall
**答案：C**
10. 要讓區塊只圓角上方兩角，應使用哪兩個 Corner 定義？
A. BottomStart, BottomEnd
B. TopStart, TopEnd
C. Start, End
D. AllCorners
**答案：B**
11. 哪個 Modifier 可用於裁剪元件角落形狀？
A. border()
B. shape()
C. clip()
D. round()
**答案：C**
12. 為了設定背景為純白色，應使用哪個色彩參數？
A. MaterialTheme.colorScheme.background
B. MaterialTheme.colorScheme.primary
C. MaterialTheme.colorScheme.surfaceContainerLowest
D. Color.White
**答案：C**
13. 垂直方向 24.dp、水平 16.dp 的 padding 應使用哪個 Modifier？
A. padding(16.dp)
B. padding(horizontal = 16.dp, vertical = 24.dp)
C. margin(16.dp, 24.dp)
D. inset(16.dp, 24.dp)
**答案：B**
14. 若 Scaffold 不要套用導航列內邊距，應使用什麼設定？
A. contentPadding = PaddingValues.Zero
B. windowInsets = WindowInsets.systemBars
C. contentWindowInsets = WindowInsets.statusBars
D. windowInsets = WindowInsets.statusBars
**答案：D**
15. 若 Column 需要考慮導航列內邊距，應加入哪個 Modifier？
A. applyInsets()
B. respectSystemBars()
C. consumeWindowInsets(WindowInsets.navigationBars)
D. fillSystemInsets()
**答案：C**
16. 表單中的文字欄位應該被包在什麼 Composable 裡？
A. Row
B. Box
C. Column
D. Scaffold
**答案：C**
17. NotemarkTextField 欄位若為密碼，參數 isInputSecret 應設定為？
A. true
B. false
C. null
D. 0
**答案：A**
18. 要讓欄位填滿寬度，需加入哪個 Modifier？
A. matchWidth()
B. wrapContentWidth()
C. fillMaxWidth()
D. expandHorizontally()
**答案：C**
19. 在欄位之間加垂直間距，常用哪個 Composable？
A. Divider
B. Spacer
C. Line
D. EmptyBox
**答案：B**
20. 登入按鈕使用哪個元件建立？
A. BasicButton
B. NotemarkButton
C. PrimaryButton
D. ActionButton
**答案：B**
21. 若只想讓連結置中對齊，應使用哪個對齊設定？
A. align(Alignment.CenterVertically)
B. align(Alignment.Center)
C. align(Alignment.CenterHorizontally)
D. align(Alignment.Bottom)
**答案：C**
22. 建立登入畫面狀態應使用哪個方法儲存狀態？
A. mutableStateFlow
B. remember { mutableStateOf(...) }
C. LiveData
D. savedStateHandle
**答案：B**
23. 密碼可見性的切換應該依據哪個狀態顯示不同圖示？
A. isInputSecret
B. isPasswordHidden
C. isPasswordVisible
D. showPasswordIcon
**答案：C**
24. 若 text field 圖示為 visibility off，代表？
A. 顯示文字
B. 隱藏文字
C. icon disabled
D. 欄位鎖定
**答案：B**
25. 改變輸入文字時，應使用哪個 lambda 接收？
A. onUpdate()
B. onValueChanged()
C. onTextChanged()
D. onValueChange()
**答案：D**
26. 填寫 email 欄位的提示文字範例是？
A. [john@example.com](mailto:john@example.com)
B. [user@example.com](mailto:user@example.com)
C. [john.doe@sample.com](mailto:john.doe@sample.com)
D. [john@doacample.com](mailto:john@doacample.com)
**答案：D**
27. Composable 名稱中通常用哪個命名慣例？
A. snake\_case
B. camelCase
C. PascalCase
D. kebab-case
**答案：C**
28. 為了防止重複樣式，登入表單應抽成什麼？
A. function
B. Composable
C. class
D. lambda
**答案：B**
29. 垂直元素間距可使用哪個 verticalArrangement 參數？
A. spacedBy(x.dp)
B. distributedBy(x.dp)
C. padding(y.dp)
D. offset(x.dp)
**答案：A**
30. NotemarkLink 的文字內容應該是？
A. Register here
B. Create an account
C. Don't have an account
D. Sign up now
**答案：C**
1. 哪一個情況最適合使用 `window size classes`？
A. 永遠使用固定寬高
B. 設計桌面版應用程式
C. 根據裝置螢幕的寬高自適應 UI
D. 固定螢幕方向
答案：C
2. 下列哪一個不是 `WindowSizeClass` 的寬度分類？
A. Compact
B. Medium
C. Extended
D. Expanded
答案：C
3. 使用 `window size classes` 的目的為何？
A. 增加記憶體效能
B. 根據螢幕大小切換 UI 結構
C. 優化網路流量
D. 加速動畫轉場
答案：B
4. 若要根據 `width` 與 `height` 共同決定裝置類型，哪個做法正確？
A. 只看 width
B. 只看 height
C. 結合 width 與 height class
D. 使用螢幕 DPI
答案：C
5. `Material3 adaptive` 的版本建議使用哪個版本？
A. 2.0.0
B. 1.1.1
C. 3.0.0
D. 0.9.9
答案：B
6. 若裝置為手機直向，應該落在什麼寬高類別？
A. width = expanded, height = compact
B. width = compact, height = medium
C. width = medium, height = compact
D. width = expanded, height = medium
答案：B
7. 在 mobile landscape 中應該如何安排 UI？
A. 使用 Column 並置中
B. 使用 Row 並加上等權重
C. 使用 Box
D. 使用固定寬度
答案：B
8. 哪個 Android 工具能處理 display cutouts（螢幕凹口）？
A. Modifier.padding(16.dp)
B. Modifier.windowInsetsPadding(WindowInsets.displayCutout)
C. Modifier.ignoreCutouts()
D. Modifier.fullscreen()
答案：B
9. 在 tablet landscape 上最適合的 UI 配置方式是？
A. 與手機 landscape 相同
B. 與手機 portrait 相同
C. 顯示單一區塊
D. 固定比例拉伸 UI
答案：B
10. 如果需要針對不同裝置設定不同 UI，建議做法是？
A. 使用 `if-else` 判斷螢幕 DPI
B. 建立 enum class 表示裝置配置
C. 建立不同 layout XML
D. 強制所有裝置使用 portrait 模式
答案：B
11. `DeviceConfiguration` enum class 的作用為何？
A. 儲存裝置名稱
B. 儲存 DPI 值
C. 定義裝置方向與類型組合
D. 定義不同 layout theme
答案：C
12. 哪個組合代表 mobile landscape？
A. width: compact, height: medium
B. width: expanded, height: compact
C. width: medium, height: expanded
D. width: compact, height: expanded
答案：B
13. 哪個組合代表 tablet portrait？
A. width: medium, height: expanded
B. width: expanded, height: compact
C. width: compact, height: medium
D. width: expanded, height: expanded
答案：A
14. 若設計桌面版 UI，應使用哪種配置？
A. Column 並全寬
B. Row 並權重分配
C. Column 並限制最大寬度
D. 將表單與 header 疊加
答案：C
15. 為何要使用 `widthIn(max = 540.dp)`？
A. 確保小螢幕排版
B. 限制內容最大寬度以防太寬
C. 固定螢幕旋轉
D. 增加元件高度
答案：B
16. 使用 `Modifier.weight(1f)` 的效果是？
A. 固定寬度
B. 分攤空間比例
C. 強制居中
D. 設定固定 margin
答案：B
17. 下列哪個不是建議用於設計自適應 UI 的方法？
A. 使用 weight
B. 使用 fillMaxWidth
C. 使用硬編碼的 dp 值
D. 使用 widthIn
答案：C
18. 對於有凹口的螢幕，應加入什麼？
A. 系統 padding
B. display cutout padding
C. 強制裁切
D. overlay 遮罩
答案：B
19. 哪個類型的 UI 最常需要 scroll？
A. Desktop
B. Tablet landscape
C. Mobile portrait
D. Smartwatch
答案：C
20. 哪個 UI 排列最適合在手機橫向使用？
A. Column + fillMaxWidth
B. Row + equal weight
C. Box + wrapContent
D. LazyColumn
答案：B
21. 要讓內容垂直捲動，應加入什麼 Modifier？
A. scrollable()
B. verticalScroll(rememberScrollState())
C. lazyScroll()
D. horizontalScroll()
答案：B
22. `horizontalAlignment = Alignment.CenterHorizontally` 的效果是？
A. 垂直置中
B. 元件在水平方向置中
C. 水平靠右
D. 垂直置底
答案：B
23. 在哪種裝置上不需要處理裝置方向？
A. 手機
B. 平板
C. 桌機
D. 可摺疊裝置
答案：C
24. 若內容在不同裝置上使用相同邏輯，建議做法是？
A. 重複程式碼
B. 使用多 layout
C. 將共用邏輯抽出
D. 使用硬編碼的判斷式
答案：C
25. 以下哪一個不是 window size class 可處理的維度？
A. Width
B. Height
C. DPI
D. Orientation
答案：C
26. 當遇到 Pixel XL 類型裝置時，其 height class 最可能是？
A. Compact
B. Medium
C. Expanded
D. Undefined
答案：C
27. 為什麼不建議在所有情況都依賴 width size class？
A. 無法取得裝置資訊
B. 容易誤判裝置配置
C. 不能處理橫向
D. 會降低效能
答案：B
28. 若要讓 Header 的對齊方式可變，應如何設計參數？
A. 傳入 string
B. 傳入 Alignment
C. 傳入 Boolean
D. 使用 global var
答案：B
29. 以下哪個不是 `Material 3 adaptive` 的特色？
A. 分類裝置大小
B. 依裝置顯示不同 UI
C. 自動產生 UI
D. 提供寬高分類
答案：C
30. 若要提高不同裝置下 UI 的一致性，最佳方式是？
A. 硬編碼各個 layout
B. 使用相同元件並根據裝置配置調整
C. 針對每個裝置分支設計
D. 僅支援手機直向
答案：B
---
# Terminology
* Jetpack Compose：Android 的現代 UI 工具包，使用聲明式程式設計模型。
* Composable：可組合的 UI 元件，是 Compose 的基本構建單位。
* Modifier：用於改變 Composable 外觀、布局與互動行為的修飾器。
* Column：垂直排列子 Composable 的容器。
* Row：水平排列子 Composable 的容器。
* ConstraintLayout：提供靈活位置控制的布局容器。
* Button：基本的可點擊按鈕元件。
* Text：顯示文字的 Composable。
* Spacer：用於元件間的空白間距。
* RoundedCornerShape：定義具有圓角的形狀。
* MaterialTheme：定義顏色、形狀、字型等 Material Design 風格設定。
* ColorScheme：Material 3 提供的顏色組合。
* Typography：文字樣式的集合。
* OutlineTextField：具邊框樣式的輸入欄位 Composable。
* TextFieldDefaults：設定 TextField 樣式的預設值集合。
* PasswordVisualTransformation：隱藏輸入文字的視覺效果。
* VisualTransformation：定義輸入文字如何顯示的類別。
* remember：Compose 中保存狀態的函式。
* mutableStateOf：建立可變狀態的狀態持有者。
* rememberSaveable：即使重新組合也保留狀態的 API。
* ImageVector：向量圖示資源的類型。
* Icons.Default：Compose 提供的預設圖示集合。
* IconButton：具有點擊行為的圖示按鈕。
* TextStyle：定義文字的樣式，例如字型大小、字重等。
* Shape：定義 UI 元件邊框形狀的介面。
* dp（Density-independent Pixels）：獨立於螢幕密度的單位。
* Modifier.fillMaxWidth()：讓元件填滿父容器寬度。
* Modifier.height()：設定元件的高度。
* Modifier.padding()：設定元件的內距。
* contentPadding：定義按鈕等元件中內容與邊界的間距。
* onClick：按鈕點擊時所觸發的行為。
* State Hoisting：將狀態從 Composable 提升至呼叫者以利重用與測試。
* Design System：一致化 UI 元件與樣式的設計標準。
* Material3：Material Design 第三版設計指南與套件。
* CompositionLocalProvider：提供全域設定如主題給子 Composable。
* WindowSizeClass：根據螢幕寬度分類的裝置尺寸類別。
* Compact：WindowSizeClass 中表示窄螢幕的類別（如直立手機）。
* Medium：WindowSizeClass 表示中等寬度（如橫向手機或小平板）。
* Expanded：WindowSizeClass 表示寬螢幕（如平板或桌面）。
* Box：允許重疊排列子 Composable 的容器。
* Surface：具有背景顏色與陰影的容器 Composable。
* ConstraintSet：ConstraintLayout 中的約束定義集合。
* Modifier.weight()：分配 Row 或 Column 中空間的比例。
* Modifier.widthIn()：限制最小與最大寬度。
* Modifier.align()：控制子元件在容器中的對齊方式。
* LocalConfiguration：提供裝置目前設定（如螢幕尺寸、方向）。
* DerivedStateOf：記憶計算狀態以避免不必要 recomposition。
* LaunchedEffect：用於在特定條件下啟動協程。
* rememberUpdatedState：提供最新的狀態值給協程或 effect handlers。
* mutableStateListOf：建立可觀察的 List 狀態容器。
* Modifier.requiredWidth()：強制設定寬度，無視父層規則。
* Modifier.maxWidth()：設為最大寬度限制。
* Modifier.clip()：將元件剪裁為特定形狀。
* Modifier.background()：設定元件背景色或圖案。
* Modifier.clickable()：讓元件可點擊並處理點擊事件。
* Modifier.testTag()：設定元件的測試標籤，用於 UI 測試。
* **Window Size Classes**：根據螢幕寬高將設備分為 Compact、Medium、Expanded 幾種類別，用於實現響應式設計。
* **Compact Width**：表示設備螢幕寬度較窄，通常為手機直向。
* **Medium Width**：表示設備螢幕寬度中等，常見於平板直向。
* **Expanded Width**：表示設備螢幕寬度寬廣，例如平板橫向或桌面裝置。
* **Compact Height**：表示設備高度較小，常見於手機橫向。
* **Medium Height**：設備高度中等，常見於平板。
* **Expanded Height**：設備高度大，如高解析度設備或桌面。
* **Material3 Adaptive**：Jetpack Compose 多平台的適應式設計函式庫。
* **Scaffold**：Compose 中的基礎頁面結構容器，用於支援頂部列、底部列等。
* **WindowInsets**：提供系統 UI 元素（如狀態列、導航列、劉海區）佔用的空間資訊。
* **WindowInsetsPadding**：根據 WindowInsets 提供對應的內距處理。
* **DisplayCutout**：螢幕上的劉海或鏡頭挖孔區域。
* **Row**：Compose 中水平方向排列 Composable 的容器。
* **Column**：Compose 中垂直方向排列 Composable 的容器。
* **Modifier**：Compose 中調整 Composable 外觀與行為的鏈式配置工具。
* **weight()**：分配剩餘空間的相對比重，用於 Row 或 Column 子項。
* **widthIn()**：限制寬度在某個範圍之內。
* **alignment.CenterHorizontally**：在父容器中水平置中對齊。
* **Device Configuration**：定義裝置配置的列舉類別，如手機直向、平板橫向等。
* **when expression**：Kotlin 中的條件分支結構，用於處理多種狀況。
* **rememberScrollState()**：建立一個可用於滾動的記憶狀態。
* **verticalScroll()**：讓 Composable 元件具備垂直滾動能力。
* **horizontalArrangement**：設定 Row 中子元素的水平排列方式。
* **verticalArrangement**：設定 Column 中子元素的垂直排列方式。
* **scaffoldPadding**：從 Scaffold 傳遞下來的內距，用來避免 UI 被系統元件遮住。
* **Composable Function**：使用 @Composable 標記的函數，可在 Compose 中宣告 UI。
* **enum class**：Kotlin 的列舉類別，用來定義固定組合的常數。
* **currentWindowAdaptiveInfo**：從 Material3 Adaptive 函式庫中取得當前視窗適應資訊。
* **fillMaxWidth()**：讓 Composable 寬度填滿可用空間。
* **fillMaxSize()**：讓 Composable 佔滿所有父容器空間。
* **padding(horizontal = x.dp, vertical = y.dp)**：設定左右與上下的內距。
* **modifier.clip(shape)**：將 Composable 裁切為指定形狀。
* **background(color)**：設定 Composable 背景顏色。
* **TextAlign.Center**：文字置中對齊。
* **Alignment.Start**：在父容器中左對齊。
* **Arrangement.spacedBy(x.dp)**：為 Row 或 Column 中的 Composable 元件設定間距。
* **mutableStateOf()**：建立可觀察的可變狀態。
* **remember()**：在組合期間保留狀態資料。
* **OutlineTextField**：具有邊框的輸入欄位元件。
* **TextFieldDefaults.outlinedTextFieldColors()**：設定 OutlineTextField 的顏色樣式。
* **TrailingIcon**：TextField 中尾端的圖示欄位，通常用於密碼可視切換。
* **PasswordVisualTransformation**：將文字轉換為密碼遮蔽符號。
* **visibility / visibilityOff**：切換密碼欄位可見性的圖示。
* **ScaffoldState**：控制 Scaffold 內 Snackbar、Drawer 等狀態的物件。
* **Alignment.Center**：元素於垂直與水平皆置中的對齊方式。
* **Hot Reload**：允許 UI 修改後即時顯示變更而不重啟應用。
* **dp (density-independent pixel)**：與螢幕密度無關的抽象像素單位。
* **App.kt**：Compose Multiplatform 專案的主要進入點程式。
* **BuildConfig**：編譯階段可用的配置變數集合。
* **Launch Device**：在模擬器或實體裝置上啟動應用以測試 UI。
* **Breakpoint**：在響應式設計中，用於切換不同佈局的臨界值。
* **Adaptive Layout**：根據設備特性（如螢幕尺寸）調整佈局以提供更佳使用體驗。
* **Mockup**：設計稿或原型畫面，作為開發 UI 的參考。
* **PaddingValues**：Compose 中表示內距資訊的資料類型。
* **NavigationBarPadding**：為底部導航列提供的預留空間。
* **NestedScroll**：允許內層滾動視圖在外層滾動條件下正常運作的行為處理器。
* **Jetpack Compose Multiplatform**：JetBrains 開發的 Compose UI 框架，用於多平台（Android、Desktop 等）。
Sign in with Wallet
Connect another wallet