Android Jetpack Compose UI (Declarative UI) 介紹

Jetpack Compose 是 Android 的現代化 UI 工具包。它徹底改變了我們構建介面的方式：從命令式 (Imperative) 轉向 宣告式 (Declarative)。

宣告式 vs 命令式

在傳統的 Android View 系統（使用 XML）中，我們通常這樣寫程式：

在 XML 定義佈局。
在 Java/Kotlin 中使用 findViewById 找到 View。
當資料改變時，手動呼叫 textView.setText(newData) 或 view.setVisibility(View.GONE)。

這就是命令式 UI：你需要手動管理 UI 的狀態變化，如同操作木偶的線。隨著 App 變複雜，這些線容易纏在一起（狀態不同步），導致 Bug。

宣告式 UI (Compose) 則是完全不同的思維：

你只需要描述「在特定的狀態下，UI 應該長什麼樣子」。

當狀態改變時，Compose 框架會自動重新執行你的 UI 程式碼，生成新的畫面。你不需要（也不能）手動去「修改」UI，你只能「更新狀態」。

核心概念：Composition (組合)

在 Compose 中，UI 是由一個個 Composable 函式 組合而成的。

@Composable
fun Greeting(name: String) {
    Text("Hello $name")
}

@Composable：告訴編譯器這是一個 UI 函式。
函式即元件：UI 不再是物件 (Object)，而是函式 (Function)。
無回傳值：Composable 函式負責「發射」UI，而不是回傳 View 物件。

Recomposition (重組)

這是 Compose 最重要的機制。

當 Composable 函式所依賴的狀態 (State) 發生改變時，Compose 會自動重新呼叫該函式。這個過程稱為 Recomposition。

@Composable
fun Counter() {
    // 定義狀態
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")
        
        Button(onClick = { count++ }) { // 更新狀態
            Text("Add")
        }
    }
}

初始執行：count 為 0，顯示 "Count: 0"。
使用者點擊按鈕：count 變為 1。
Recomposition：Compose 偵測到 count 變了，於是重新執行 Counter() 函式。
更新畫面：Text 顯示 "Count: 1"。

智慧重組 (Smart Recomposition)

Compose 非常聰明，它只會重組受影響的部分。如果你的畫面上有 100 個元件，但只有一個 Text 的文字變了，Compose 只會重繪那個 Text，而跳過其他 99 個元件。這保證了效能。

Unidirectional Data Flow (單向資料流)

為了讓狀態管理更清晰，Compose 提倡 單向資料流 (UDF) 模式：

Event (事件) 往上傳：使用者互動（點擊、輸入）產生事件，傳遞給 ViewModel 處理。
State (狀態) 往下流：ViewModel 更新狀態，狀態透過參數傳遞給 Composable 重新渲染。

這種模式消除了 View 與資料層之間的耦合，讓程式碼更容易測試與維護。

小結

轉移到 Compose 開發，最大的挑戰不在於語法，而在於思維轉變：

不要想著「如何改變這個 TextView」。
要想著「當狀態是 X 時，畫面應該顯示什麼」。

一旦你習慣了這種思維，你會發現開發 UI 變得前所未有的快速與直觀。