# Kotlin / Ch05 - Jetpack Compose

## 第一章：Jetpack Compose 簡介與核心概念

### 1.1 什麼是 Jetpack Compose

Jetpack Compose 是 Google 推出的現代化 Android UI 工具包，它採用 Declarative Programming 的方式來建構使用者介面。這個概念比較容易聯想到 React 或 Vue.js 這類前端框架，它們都強調透過描述「UI 應該是什麼樣子」而非「如何改變 UI」來開發介面。

傳統的 Android 開發使用 XML 來定義佈局，並透過 Java 或 Kotlin 程式碼操作 View 物件；Imperative Programming 的方式就會需要開發者手動管理 UI 狀態的同步，容易產生錯誤。Compose 則徹底改變了這個模式，它採用 Kotlin 函數來描述 UI，當資料改變時，框架會自動重新渲染相關的 UI 部分。

### 1.2 為什麼選擇 Compose

從傳統 View 系統遷移到 Compose 帶來了多個顯著優勢。首先是程式碼量的大幅減少。原本需要在 XML 中定義佈局，在 Activity 或 Fragment 中綁定 View，再設定各種監聽器的流程，現在可以在單一個 Composable 函數中就可以完成。這種整合性讓程式碼更容易閱讀和維護。

其次是型別安全，XML 佈局在編譯時期無法完全驗證，許多錯誤只能在執行時期發現。Compose 完全使用 Kotlin 編寫，享有完整的型別檢查、IDE 自動完成和重構支援。

第三是效能優化。Compose 的編譯器會進行智慧型差異比對（Smart Recomposition），只更新實際改變的 UI 元素。這個機制類似於 React 的 Virtual DOM，但更加高效。框架會追蹤資料依賴關係，確保不必要的 Re-render 被省略。

### 1.3 Declarative UI 的思維轉換

理解 Declarative Programming 是掌握 Compose 的關鍵。在 Imperative Programming 中，你會寫出「將按鈕的文字設為 X」、「隱藏這個 TextView」這樣的指令序列。不過在 Declarative Programming 中，你則是描述「當狀態為 A 時，按鈕顯示文字 X」、「當條件 B 成立時，這個元件不可見」。

> 這種思維方式在 Spring 開發中也有體現。例如 Spring Security 的設定，你不是寫「檢查使用者，如果是管理員則允許存取」，而是聲明「這個端點需要 ADMIN 角色」。Compose 將這個概念徹底應用到 UI 開發。

讓我們看一個簡單的對比。傳統方式可能需要這樣寫：

val textView = findViewById<TextView>(R.id.message)
val button = findViewById<Button>(R.id.button)
button.setOnClickListener {
    counter++
    textView.text = "點擊次數: $counter"
}

而在 Compose 中，同樣的功能變成：

@Composable
fun CounterScreen() {
    var counter by remember { mutableStateOf(0) }
    Column {
        Text("點擊次數: $counter")
        Button(onClick = { counter++ }) {
            Text("點擊我")
        }
    }
}

**你不需要手動更新 UI，只需要改變狀態（`counter`），UI 會自動反映這個改變。**

### 1.4 Compose 的核心原則

#### 1.4.1 Composable 函數

Composable 函數是 Compose 的基本建構單元。它們是標註了 `@Composable` annotation 的普通 Kotlin 函數，用來描述 UI 的一部分。這個概念類似於 Spring 中的 `@Component` 或 `@Bean`，告訴框架這個函數有特殊的處理方式。

Composable 函數可以呼叫其他 Composable 函數，形成 UI 樹狀結構。每個函數可以接收參數來客製化其行為，就像普通函數一樣。重要的是，Composable 函數應該是純函數（Pure Function）的概念，相同的輸入應該產生相同的輸出。

#### 1.4.2 狀態與重組（Recomposition）

狀態（State）是驅動 UI 變化的核心。在 Compose 中，當狀態改變時，依賴該狀態的 Composable 函數會被重新執行，這個過程稱為重組（Recomposition）。框架會智慧地決定哪些部分需要重組，哪些可以跳過；**這個機制讓你可以專注於資料流，而非手動同步 UI。**

#### 1.4.3 單向資料流

Compose 遵循單向資料流（Unidirectional Data Flow）模式。資料從父組件流向子組件，事件從子組件向上傳遞到父組件。這個模式讓資料流動變得可預測和可追蹤，減少了狀態管理的複雜度。

在實作上，這通常意味著父組件持有狀態，並將狀態和回調函數傳遞給子組件。子組件是無狀態的（Stateless），只負責顯示接收到的資料和觸發事件。

---

## 第二章：Compose 的建構基礎

### 2.1 開發環境設定

開始 Compose 開發前需要確保開發環境符合要求。首先是 Android Studio，建議使用 Arctic Fox（2020.3.1）或更新版本，這些版本對 Compose 有完整的支援，包括即時預覽（Live Preview）和互動式預覽功能。

在專案的 `build.gradle.kts`（如果你使用 Kotlin DSL）或 `build.gradle` 中，需要設定 Compose 相關的依賴。以下是基本的設定範例：

android {
    compileSdk = 34
    
    defaultConfig {
        minSdk = 21
        targetSdk = 34
    }
    
    buildFeatures {
        compose = true
    }
    
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.3"
    }
    
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2024.02.00")
    implementation(composeBom)
    
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.activity:activity-compose:1.8.2")
    
    debugImplementation("androidx.compose.ui:ui-tooling")
}

這裡使用了 BOM（Bill of Materials）來管理 Compose 版本，就不需要為每個依賴指定版本號。

### 2.2 第一個 Composable 函數

讓我們建立第一個簡單的 Composable 函數。在 Compose 中，所有的 UI 元件都是函數，不是類別。這是一個重要的概念轉變，特別是對於習慣物件導向設計的 Java 開發者。

@Composable
fun Greeting(name: String) {
    Text(text = "你好, $name!")
}

這個函數接收一個字串參數，並顯示一段文字。`@Composable` annotation 告訴編譯器這個函數會發射 UI。`Text` 是 Compose 提供的基礎元件，類似於傳統 Android 的 TextView。

要在 Activity 中使用這個函數，你需要在 `setContent` 區塊中呼叫它：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Greeting(name = "開發者")
            }
        }
    }
}

`setContent` 是 Compose 的進入點，它替代了傳統的 `setContentView`。`MaterialTheme` 提供了 Material Design 的主題樣式，包含顏色、字型和形狀定義。

### 2.3 預覽功能

Compose 的一大優勢是即時預覽功能。你可以在不執行應用的情況下，直接在 Android Studio 中查看 UI 的樣子。這需要建立預覽函數：

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MaterialTheme {
        Greeting(name = "預覽模式")
    }
}

`@Preview` annotation 告訴 IDE 這是一個預覽函數。你可以設定多個參數來客製化預覽效果，例如 `showBackground` 顯示背景，`uiMode` 切換深色模式，`device` 指定裝置類型等。

預覽函數不會出現在最終的 APK 中，它們純粹是開發時的輔助工具。你可以為同一個 Composable 建立多個預覽，展示不同的狀態或配置。

### 2.4 Modifier：樣式與行為的調整器

Modifier 是 Compose 中用來調整 Composable 外觀和行為的機制。它採用鏈式呼叫（Chaining）的方式，讓你可以依序套用多個修飾。這個設計模式類似於 Java Stream API 或 Kotlin 的集合操作。

@Composable
fun StyledText() {
    Text(
        text = "樣式化的文字",
        modifier = Modifier
            .padding(16.dp)
            .background(Color.LightGray)
            .fillMaxWidth()
            .height(100.dp)
    )
}

這裡的 Modifier 鏈依序套用了內邊距、背景色、寬度填滿和固定高度。**順序很重要：例如先套用 padding 再套用 background，背景就不會包含 padding 區域；反之則會。**

Modifier 還可以處理互動行為。例如 `clickable` 讓元件可點擊，`draggable` 讓元件可拖曳。這些修飾器將行為與外觀統一在同一個 API 中處理。

### 2.5 組合與重用

**Compose 鼓勵建立小而專注的 Composable 函數，然後組合它們來建構複雜的 UI。** 這個理念與主流前端框架的「元件」設計邏輯一致，都是為了提高程式碼的可維護性和可測試性。

例如，你可以建立一個自訂的卡片元件：

@Composable
fun UserCard(name: String, email: String) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = name,
                style = MaterialTheme.typography.titleLarge
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = email,
                style = MaterialTheme.typography.bodyMedium,
                color = Color.Gray
            )
        }
    }
}

這個 `UserCard` 可以在應用的多個地方重複使用，只需傳入不同的參數。這種組合式的設計讓 UI 變得模組化，每個元件都有清晰的責任界線。

---

## 第三章：狀態管理基礎

### 3.1 理解狀態

在 Compose 中，狀態（State）是指任何會隨時間變化並影響 UI 顯示的資料。這可能是使用者輸入、網路請求結果、定時器數值等等。理解狀態管理是掌握 Compose 的關鍵，因為 **Compose 的核心理念就是「UI = f(State)」**，也就是說，UI 是狀態的函數。

### 3.2 remember 與 mutableStateOf

Compose 提供了 `remember` 和 `mutableStateOf` 來建立和儲存狀態。讓我們深入理解這兩個 API 的運作方式。

`mutableStateOf` 建立一個可觀察的狀態物件。當這個物件的值改變時，所有讀取它的 Composable 函數都會被通知並重組。這類似於觀察者模式（Observer Pattern），是 Reactive Programming 的體現。

@Composable
fun Counter() {
    val count = remember { mutableStateOf(0) }
    
    Column {
        Text("目前計數: ${count.value}")
        Button(onClick = { count.value++ }) {
            Text("增加")
        }
    }
}

在這個範例中，`mutableStateOf(0)` 建立了一個初始值為 0 的狀態。`remember` 確保這個狀態在重組過程中被保留。沒有 `remember` 的話，每次重組都會重新建立狀態物件，導致值被重置。

`remember` 的作用類似於在 Spring 中使用 `@Scope("singleton")`，確保物件在特定範圍內只有一個實例。不同的是，Compose 的 remember 是按 Composable 的位置來記憶，而非全域單例。

### 3.3 委派屬性語法

直接使用 `count.value` 讀寫狀態是可行的，但 Kotlin 提供了更優雅的委派屬性（Delegated Property）語法：

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("目前計數: $count")
        Button(onClick = { count++ }) {
            Text("增加")
        }
    }
}

使用 `by` 關鍵字後，你可以直接讀寫 `count` 而不需要透過 `.value`。這讓程式碼更簡潔，更接近普通變數的使用方式。在幕後，Kotlin 編譯器會自動生成必要的 getter 和 setter。

這個語法需要匯入 `import androidx.compose.runtime.getValue` 和 `import androidx.compose.runtime.setValue`，不過 Android Studio 通常會自動處理這些匯入。

### 3.4 狀態提升（State Hoisting）

Hoisting 是 Compose 中一個重要的模式，它指的是**將狀態從子元件移到父元件，讓子元件變成無狀態的（Stateless）**。這樣做有幾個好處：提高可重用性、簡化測試、讓資料流更清晰。

這邊可以直接看範例，首先是有狀態的版本：

@Composable
fun StatefulCounter() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}

然後是無狀態的子元件：

@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column {
        Text("目前計數: $count")
        Button(onClick = onIncrement) {
            Text("增加")
        }
    }
}

Hoisting 讓 `CounterDisplay` 變得可預測且易於測試，你可以傳入任意的 count 值和 onIncrement 實作，不需要 Mock 任何東西。這個優勢比較能在單元測試中體現，類似在 Spring 中測試 Service 層比測試整個 Controller 更容易。

### 3.5 rememberSaveable

`remember` 只能在 Composable 的生命週期中保存狀態。當配置改變（例如螢幕旋轉）導致 Activity 重建時，remember 的狀態會遺失。為了處理這種情況，Compose 提供了 `rememberSaveable`。

@Composable
fun PersistentCounter() {
    var count by rememberSaveable { mutableStateOf(0) }
    
    Column {
        Text("計數（會保存）: $count")
        Button(onClick = { count++ }) {
            Text("增加")
        }
    }
}

`rememberSaveable` 會將狀態儲存到 Android 的 saved instance state 機制中，這類似於傳統 Android 開發中的 `onSaveInstanceState` 和 `onRestoreInstanceState`。它只能儲存可序列化的基本類型或實作了 Parcelable 的物件。

那對於複雜的物件，你會需要提供自訂的 Saver：

data class User(val name: String, val age: Int)

val UserSaver = Saver<User, List<Any>>(
    save = { listOf(it.name, it.age) },
    restore = { User(it[0] as String, it[1] as Int) }
)

@Composable
fun UserProfile() {
    var user by rememberSaveable(stateSaver = UserSaver) {
        mutableStateOf(User("訪客", 0))
    }
    // ... UI 實作
}

這個機制與 Spring Session 的序列化類似，都是為了在不同的生命週期階段保持狀態一致性。

## 第四章：Layout 與 UI 組件

### 4.1 基礎 Layout 元件

Compose 提供了幾個基礎的 Layout 元件來組織 UI 結構。這些元件類似於傳統 Android 的 LinearLayout、FrameLayout 等，但設計更加簡潔和靈活。

#### 4.1.1 Column 與 Row

`Column` 和 `Row` 是最常用的佈局元件，分別用於垂直和水平排列子元素。它們的使用非常直觀，對 CSS 熟悉的朋友們是直接無痛上手的：

@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("第一行文字")
        Text("第二行文字")
        Button(onClick = { }) {
            Text("按鈕")
        }
    }
}

`verticalArrangement` 控制子元素在垂直方向的排列方式，可以是：
- `spacedBy`（等距分布）
- `SpaceBetween`（兩端對齊）
- `SpaceAround`（周圍留空）

`horizontalAlignment` 則控制子元素的水平對齊方式。這些參數讓你可以精確控制佈局行為，而不需要複雜的 XML 設定。

Row 的使用方式類似，只是方向相反：

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(Icons.Default.Favorite, contentDescription = "喜歡")
        Text("項目名稱")
        Text("$99", fontWeight = FontWeight.Bold)
    }
}

#### 4.1.2 Box

`Box` 用於堆疊元素，類似於 FrameLayout。子元素會按照宣告順序疊加，後面的元素會覆蓋前面的元素。這在需要重疊效果時非常有用：

@Composable
fun OverlayExample() {
    Box(modifier = Modifier.size(200.dp)) {
        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = "背景圖片",
            modifier = Modifier.fillMaxSize()
        )
        Text(
            text = "覆蓋文字",
            modifier = Modifier.align(Alignment.Center),
            color = Color.White,
            fontSize = 20.sp
        )
    }
}

Box 的 `contentAlignment` 參數可以控制預設的對齊方式，而每個子元素也可以透過 `Modifier.align()` 單獨指定對齊位置。

### 4.2 LazyColumn 與 LazyRow

當需要顯示大量項目時，使用 `LazyColumn` 或 `LazyRow` 可以獲得類似 RecyclerView 的效能優化。這些元件只會渲染螢幕上可見的項目，當使用者滾動時才載入新的項目。

@Composable
fun UserList(users: List<User>) {
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(users) { user ->
            UserCard(user = user)
        }
    }
}

@Composable
fun UserCard(user: User) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            // 使用者頭像
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .background(Color.LightGray, CircleShape)
            )
            Column {
                Text(
                    text = user.name,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = user.email,
                    style = MaterialTheme.typography.bodySmall,
                    color = Color.Gray
                )
            }
        }
    }
}

`items` 函數是 LazyColumn 的 DSL 建構器，它接受一個集合並為每個項目產生一個 Composable。這比傳統的 RecyclerView Adapter 簡單許多，不需要建立 ViewHolder 或實作複雜的 Adapter 邏輯。

對於更複雜的列表需求，LazyColumn 還提供了其他有用的函數：

LazyColumn {
    // 單一項目
    item {
        HeaderComponent()
    }
    
    // 多個項目
    items(userList) { user ->
        UserCard(user)
    }
    
    // 帶索引的項目
    itemsIndexed(userList) { index, user ->
        UserCardWithIndex(index, user)
    }
    
    // 頁尾
    item {
        FooterComponent()
    }
}

### 4.3 Scaffold：應用程式結構框架

`Scaffold` 是 Material Design 的核心佈局元件，它提供了一個標準的應用程式結構，包含 Top Bar、Bottom Bar、Floating Action Button 等常見元素。使用 Scaffold 可以快速建立符合 Material Design 規範的介面：

@Composable
fun MainScreen() {
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("首頁", "搜尋", "設定")
    
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("我的應用") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer
                )
            )
        },
        bottomBar = {
            NavigationBar {
                items.forEachIndexed { index, item ->
                    NavigationBarItem(
                        icon = { Icon(Icons.Filled.Home, contentDescription = item) },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /* 新增動作 */ }) {
                Icon(Icons.Filled.Add, contentDescription = "新增")
            }
        }
    ) { paddingValues ->
        // 主要內容區域
        Box(modifier = Modifier.padding(paddingValues)) {
            when (selectedItem) {
                0 -> HomeContent()
                1 -> SearchContent()
                2 -> SettingsContent()
            }
        }
    }
}

注意 Scaffold 的 content 參數會接收一個 `PaddingValues`，這包含了 top bar 和 bottom bar 佔用的空間。你需要將這個 padding 套用到主要內容上，以避免內容被系統 UI 遮擋。

### 4.4 自訂 Layout

雖然內建的 Layout 元件已經能滿足大部分需求，但有時你需要建立自訂的佈局邏輯。Compose 允許實現完全客製化的佈局演算法：

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // 測量所有子元素
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        
        // 計算佈局大小
        val width = placeables.maxOf { it.width }
        val height = placeables.sumOf { it.height }
        
        // 放置子元素
        layout(width, height) {
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

### 4.5 ConstraintLayout

對於複雜的相對佈局需求，Compose 也提供了 `ConstraintLayout`。雖然它不像在 XML 中那麼常用，但在某些情況下仍然方便：

@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        // 建立引用
        val (title, description, button) = createRefs()
        
        Text(
            text = "標題",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(parent.start, margin = 16.dp)
            }
        )
        
        Text(
            text = "這是一段描述文字",
            modifier = Modifier.constrainAs(description) {
                top.linkTo(title.bottom, margin = 8.dp)
                start.linkTo(parent.start, margin = 16.dp)
            }
        )
        
        Button(
            onClick = { },
            modifier = Modifier.constrainAs(button) {
                bottom.linkTo(parent.bottom, margin = 16.dp)
                end.linkTo(parent.end, margin = 16.dp)
            }
        ) {
            Text("確認")
        }
    }
}

使用 ConstraintLayout 需要額外的依賴：`implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")`。

---

## 第五章：進階狀態管理與架構

### 5.1 ViewModel 整合

對於複雜的應用程式，將所有狀態邏輯都放在 Composable 中會導致程式碼難以維護。這時就需要引入架構元件，特別是 ViewModel。ViewModel 的概念對於 Spring 開發者來說應該不陌生，它類似於 Service 層，負責處理業務邏輯和資料管理。

首先需要新增依賴：

implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")

然後建立 ViewModel：

class UserViewModel : ViewModel() {
    private val _users = MutableStateFlow<List<User>>(emptyList())
    val users: StateFlow<List<User>> = _users.asStateFlow()
    
    private val _isLoading = MutableStateFlow(false)
    val isLoading: StateFlow<Boolean> = _isLoading.asStateFlow()
    
    fun loadUsers() {
        viewModelScope.launch {
            _isLoading.value = true
            try {
                val result = userRepository.getUsers()
                _users.value = result
            } catch (e: Exception) {
                // 處理錯誤
            } finally {
                _isLoading.value = false
            }
        }
    }
    
    fun addUser(user: User) {
        _users.value = _users.value + user
    }
}

這裡使用了 Kotlin Flow 的 `StateFlow`，它是一個狀態持有者，類似於 LiveData 但更適合 Kotlin Coroutines。`viewModelScope` 是 ViewModel 提供的協程作用域，當 ViewModel 被清除時會自動取消所有協程，避免記憶體洩漏。

在 Composable 中使用 ViewModel：

@Composable
fun UserScreen(
    viewModel: UserViewModel = viewModel()
) {
    val users by viewModel.users.collectAsStateWithLifecycle()
    val isLoading by viewModel.isLoading.collectAsStateWithLifecycle()
    
    LaunchedEffect(Unit) {
        viewModel.loadUsers()
    }
    
    if (isLoading) {
        LoadingIndicator()
    } else {
        UserList(users = users)
    }
}

`collectAsStateWithLifecycle()` 是一個擴充函數，它將 Flow 轉換為 Compose State，並自動處理生命週期。當 Composable 離開畫面時，它會停止收集；回到畫面時會重新開始。避免了不必要的資源消耗。

### 5.2 Side Effects 與 Effect Handlers

Compose 是一個純函數式的系統，但應用程式總是需要執行 [Side Effects](https://developer.android.com/develop/ui/compose/side-effects)（非貶義），例如網路請求、資料庫操作或導航。Compose 提供了幾個 Effect API 來安全地處理這些情況。

#### 5.2.1 LaunchedEffect

`LaunchedEffect` 用於在 Composable 進入組成時啟動協程。它接受一個或多個 key，當這些 key 改變時，之前的協程會被取消並啟動新的協程：

@Composable
fun SearchScreen(query: String) {
    var results by remember { mutableStateOf<List<SearchResult>>(emptyList()) }
    
    LaunchedEffect(query) {
        if (query.isNotEmpty()) {
            delay(300) // 防抖動
            results = searchRepository.search(query)
        }
    }
    
    SearchResults(results)
}

這個範例實作了搜尋防抖動（Debouncing）。當 query 改變時，之前的搜尋會被取消，300 毫秒後才執行新的搜尋。這個模式在 Spring 中也相當常見，例如使用 `@Async` 執行非同步任務。

#### 5.2.2 DisposableEffect

`DisposableEffect` 用於需要清理資源的情況，類似於傳統 Android 的 `onStart`/`onStop`：

@Composable
fun SensorMonitor() {
    val context = LocalContext.current
    val sensorManager = remember {
        context.getSystemService(Context.SENSOR_SERVICE) as SensorManager
    }
    
    DisposableEffect(Unit) {
        val listener = object : SensorEventListener {
            override fun onSensorChanged(event: SensorEvent) {
                // 處理感應器資料
            }
            override fun onAccuracyChanged(sensor: Sensor, accuracy: Int) {}
        }
        
        sensorManager.registerListener(
            listener,
            sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER),
            SensorManager.SENSOR_DELAY_NORMAL
        )
        
        onDispose {
            sensorManager.unregisterListener(listener)
        }
    }
}

`onDispose` 區塊會在 Composable 離開組成或 key 改變時執行，確保資源被正確釋放。

#### 5.2.3 rememberCoroutineScope

當你需要在事件處理器中啟動協程時，可以使用 `rememberCoroutineScope`：

@Composable
fun AnimatedButton() {
    val scope = rememberCoroutineScope()
    var isExpanded by remember { mutableStateOf(false) }
    
    Button(
        onClick = {
            scope.launch {
                isExpanded = true
                delay(2000)
                isExpanded = false
            }
        }
    ) {
        Text(if (isExpanded) "已展開" else "點擊展開")
    }
}

這個協程作用域綁定到 Composable 的生命週期，當 Composable 離開組成時會自動取消。

### 5.3 CompositionLocal

`CompositionLocal` 是 Compose 的依賴注入機制，類似於 React 的 Context API 或 Spring 的 DI。它允許你在組成樹的任何層級提供值，讓子元件可以存取這些值而不需要透過參數傳遞。

定義 CompositionLocal：

data class AppConfiguration(
    val apiEndpoint: String,
    val enableDebugMode: Boolean
)

val LocalAppConfig = compositionLocalOf<AppConfiguration> {
    error("未提供 AppConfiguration")
}

提供值：

@Composable
fun App() {
    val config = AppConfiguration(
        apiEndpoint = "https://api.example.com",
        enableDebugMode = BuildConfig.DEBUG
    )
    
    CompositionLocalProvider(LocalAppConfig provides config) {
        MainScreen()
    }
}

使用值：

@Composable
fun ApiCallButton() {
    val config = LocalAppConfig.current
    
    Button(onClick = {
        makeApiCall(config.apiEndpoint)
    }) {
        Text("呼叫 API")
    }
}

Compose 內建了幾個 CompositionLocal，例如 `LocalContext`（提供 Android Context）和 `LocalConfiguration`（提供裝置配置資訊）。這個機制讓你可以避免在整個組成樹中傳遞相同的參數，類似於 Spring 的 `@Autowired`。

### 5.4 單向資料流架構

實現良好的架構需要遵循單向資料流（UDF）原則。在這個模式中，狀態向下流動，事件向上傳遞。可以直接看完整範例：

// UI State
data class ProductListUiState(
    val products: List<Product> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null,
    val selectedCategory: Category? = null
)

// UI Events
sealed class ProductListEvent {
    data class SelectCategory(val category: Category) : ProductListEvent()
    object RefreshProducts : ProductListEvent()
    data class AddToCart(val productId: String) : ProductListEvent()
}

// ViewModel
class ProductListViewModel(
    private val productRepository: ProductRepository
) : ViewModel() {
    
    private val _uiState = MutableStateFlow(ProductListUiState())
    val uiState: StateFlow<ProductListUiState> = _uiState.asStateFlow()
    
    fun onEvent(event: ProductListEvent) {
        when (event) {
            is ProductListEvent.SelectCategory -> {
                selectCategory(event.category)
            }
            is ProductListEvent.RefreshProducts -> {
                loadProducts()
            }
            is ProductListEvent.AddToCart -> {
                addToCart(event.productId)
            }
        }
    }
    
    private fun selectCategory(category: Category) {
        _uiState.update { it.copy(selectedCategory = category) }
        loadProducts()
    }
    
    private fun loadProducts() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            try {
                val products = productRepository.getProducts(
                    _uiState.value.selectedCategory
                )
                _uiState.update { it.copy(products = products, isLoading = false) }
            } catch (e: Exception) {
                _uiState.update { 
                    it.copy(error = e.message, isLoading = false) 
                }
            }
        }
    }
    
    private fun addToCart(productId: String) {
        viewModelScope.launch {
            productRepository.addToCart(productId)
        }
    }
}

// UI Layer
@Composable
fun ProductListScreen(
    viewModel: ProductListViewModel = viewModel()
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    
    ProductListContent(
        uiState = uiState,
        onEvent = viewModel::onEvent
    )
}

@Composable
fun ProductListContent(
    uiState: ProductListUiState,
    onEvent: (ProductListEvent) -> Unit
) {
    Column {
        CategoryTabs(
            selectedCategory = uiState.selectedCategory,
            onCategorySelected = { category ->
                onEvent(ProductListEvent.SelectCategory(category))
            }
        )
        
        when {
            uiState.isLoading -> LoadingIndicator()
            uiState.error != null -> ErrorMessage(uiState.error)
            else -> ProductGrid(
                products = uiState.products,
                onAddToCart = { productId ->
                    onEvent(ProductListEvent.AddToCart(productId))
                }
            )
        }
    }
}

這個架構模式清楚地展示了關注點分離：ViewModel 負責業務邏輯、UI 只負責渲染和事件傳遞。

## 第六章：導航與路由

### 6.1 Navigation Compose 入門

Navigation Compose 是 Jetpack Navigation 元件的 Compose 版本，它提供了一個型別安全的方式來處理應用程式內的頁面跳轉，與定義 router & path 非常類似。

首先需要新增依賴：

implementation("androidx.navigation:navigation-compose:2.7.7")

基本的導航設定包含三個核心概念：NavController（導航控制器）、NavHost（導航宿主）和導航路由。讓我們看一個完整的範例：

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") {
            HomeScreen(
                onNavigateToProfile = { userId ->
                    navController.navigate("profile/$userId")
                },
                onNavigateToSettings = {
                    navController.navigate("settings")
                }
            )
        }
        
        composable(
            route = "profile/{userId}",
            arguments = listOf(
                navArgument("userId") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            val userId = backStackEntry.arguments?.getString("userId")
            ProfileScreen(
                userId = userId,
                onNavigateBack = {
                    navController.popBackStack()
                }
            )
        }
        
        composable("settings") {
            SettingsScreen(
                onNavigateBack = {
                    navController.popBackStack()
                }
            )
        }
    }
}

在這個範例中，我們定義了三個目的地：首頁、個人資料頁和設定頁。個人資料頁接受一個 `userId` 參數，這類似於 Spring MVC 中的 `@PathVariable`。

### 6.2 參數傳遞與深層連結

除了路徑參數，Navigation Compose 還支援查詢參數和複雜物件的傳遞。對於簡單的參數，可以使用路徑或查詢字串：

// 路徑參數
composable("article/{articleId}") { backStackEntry ->
    val articleId = backStackEntry.arguments?.getString("articleId")
    ArticleScreen(articleId = articleId)
}

// 查詢參數
composable(
    route = "search?query={query}&category={category}",
    arguments = listOf(
        navArgument("query") { 
            type = NavType.StringType
            defaultValue = ""
        },
        navArgument("category") {
            type = NavType.StringType
            nullable = true
            defaultValue = null
        }
    )
) { backStackEntry ->
    val query = backStackEntry.arguments?.getString("query") ?: ""
    val category = backStackEntry.arguments?.getString("category")
    SearchScreen(query = query, category = category)
}

對於複雜物件，建議使用 ViewModel 或持久化儲存來共享資料，而不是透過導航參數傳遞。

另外，深層連結（Deep Links）允許從外部（例如通知或網頁連結）直接開啟應用的特定頁面：

composable(
    route = "article/{articleId}",
    deepLinks = listOf(
        navDeepLink {
            uriPattern = "myapp://article/{articleId}"
            action = Intent.ACTION_VIEW
        },
        navDeepLink {
            uriPattern = "https://myapp.com/article/{articleId}"
            action = Intent.ACTION_VIEW
        }
    )
) { backStackEntry ->
    val articleId = backStackEntry.arguments?.getString("articleId")
    ArticleScreen(articleId = articleId)
}

### 6.3 巢狀導航與底部導航列

複雜的應用通常需要巢狀導航結構。例如，底部導航列的每個分頁可能有自己的導航堆疊。Navigation Compose 透過巢狀圖表（Nested Graph）來處理這種情況：

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    
    Scaffold(
        bottomBar = {
            BottomNavigationBar(navController = navController)
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = "home_graph",
            modifier = Modifier.padding(paddingValues)
        ) {
            // 首頁導航圖
            navigation(
                startDestination = "home",
                route = "home_graph"
            ) {
                composable("home") {
                    HomeScreen(
                        onNavigateToDetail = { id ->
                            navController.navigate("home_detail/$id")
                        }
                    )
                }
                composable("home_detail/{id}") { backStackEntry ->
                    val id = backStackEntry.arguments?.getString("id")
                    DetailScreen(id = id)
                }
            }
            
            // 搜尋導航圖
            navigation(
                startDestination = "search",
                route = "search_graph"
            ) {
                composable("search") {
                    SearchScreen()
                }
            }
            
            // 個人資料導航圖
            navigation(
                startDestination = "profile",
                route = "profile_graph"
            ) {
                composable("profile") {
                    ProfileScreen()
                }
            }
        }
    }
}

@Composable
fun BottomNavigationBar(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route
    
    NavigationBar {
        NavigationBarItem(
            icon = { Icon(Icons.Default.Home, contentDescription = "首頁") },
            label = { Text("首頁") },
            selected = currentRoute?.startsWith("home_graph") == true,
            onClick = {
                navController.navigate("home_graph") {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        )
        
        NavigationBarItem(
            icon = { Icon(Icons.Default.Search, contentDescription = "搜尋") },
            label = { Text("搜尋") },
            selected = currentRoute?.startsWith("search_graph") == true,
            onClick = {
                navController.navigate("search_graph") {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        )
        
        NavigationBarItem(
            icon = { Icon(Icons.Default.Person, contentDescription = "個人") },
            label = { Text("個人") },
            selected = currentRoute?.startsWith("profile_graph") == true,
            onClick = {
                navController.navigate("profile_graph") {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        )
    }
}

這個設定確保了每個分頁都有自己獨立的導航堆疊，並且在切換分頁時會保存和恢復狀態。`launchSingleTop` 防止重複導航到相同的目的地。

### 6.4 型別安全的導航

傳統的字串路由容易出錯，Navigation Compose 2.8.0 引入了型別安全的導航 API：

// 定義導航目的地
@Serializable
object Home

@Serializable
data class Profile(val userId: String)

@Serializable
data class Settings(val section: String? = null)

// 設定導航
@Composable
fun TypeSafeNavigation() {
    val navController = rememberNavController()
    
    NavHost(
        navController = navController,
        startDestination = Home
    ) {
        composable<Home> {
            HomeScreen(
                onNavigateToProfile = { userId ->
                    navController.navigate(Profile(userId))
                }
            )
        }
        
        composable<Profile> { backStackEntry ->
            val profile = backStackEntry.toRoute<Profile>()
            ProfileScreen(userId = profile.userId)
        }
        
        composable<Settings> { backStackEntry ->
            val settings = backStackEntry.toRoute<Settings>()
            SettingsScreen(section = settings.section)
        }
    }
}

---

## 第七章：最佳實踐

### 7.1 效能最佳化

#### 7.1.1 避免不必要的重組

Compose 的智慧重組機制已經很高效，但還是需要注意一些常見陷阱：

// 不好的實踐：每次重組都建立新的 lambda
@Composable
fun BadExample(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            Button(onClick = { handleClick(item) }) {
                Text(item)
            }
        }
    }
}

// 好的實踐：穩定的回調函數
@Composable
fun GoodExample(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn {
        items(items) { item ->
            Button(onClick = { onItemClick(item) }) {
                Text(item)
            }
        }
    }
}

#### 7.1.2 使用 derivedStateOf

當計算型狀態的依賴沒有改變時，可以使用 `derivedStateOf` 避免重新計算：

@Composable
fun FilteredList(items: List<Item>, searchQuery: String) {
    // 只有當 items 或 searchQuery 改變時才重新篩選
    val filteredItems by remember(items, searchQuery) {
        derivedStateOf {
            items.filter { it.name.contains(searchQuery, ignoreCase = true) }
        }
    }
    
    LazyColumn {
        items(filteredItems) { item ->
            ItemRow(item)
        }
    }
}

#### 7.1.3 延遲初始化

對於開銷比較大的物件建立，使用 `remember` 配合延遲初始化：

@Composable
fun ExpensiveComponent() {
    val expensiveObject = remember {
        // 這只會在第一次組成時執行
        ExpensiveClass()
    }
    
    // 使用 expensiveObject
}

### 7.2 專案結構建議

對於大型專案，良好的專案結構至關重要。建議如下：

app/
├── ui/
│   ├── components/          # 可重用的 UI 元件
│   │   ├── buttons/
│   │   ├── cards/
│   │   └── inputs/
│   ├── screens/             # 畫面級別的 Composable
│   │   ├── home/
│   │   │   ├── HomeScreen.kt
│   │   │   ├── HomeViewModel.kt
│   │   │   └── HomeUiState.kt
│   │   ├── profile/
│   │   └── settings/
│   ├── navigation/          # 導航相關
│   └── theme/               # 主題和樣式
├── data/                    # 資料層
│   ├── repository/
│   ├── local/
│   └── remote/
└── domain/                  # 領域層
    ├── model/
    └── usecase/

### 7.3 可訪問性（Accessibility）

確保應用程式對所有使用者友善是專業開發的重要部分，Compose 提供了內建的可訪問性支援：

@Composable
fun AccessibleButton() {
    Button(
        onClick = { /* 動作 */ },
        modifier = Modifier.semantics {
            contentDescription = "確認按鈕，點擊以提交表單"
            role = Role.Button
        }
    ) {
        Icon(Icons.Default.Check, contentDescription = null)
        Spacer(modifier = Modifier.width(8.dp))
        Text("確認")
    }
}

使用 `contentDescription` 為非文字元素提供描述，使用 `semantics` block 添加額外的語義資訊。這讓視障使用者可以透過螢幕閱讀器理解和操作你的應用程式。

---

## 附錄：Mermaid 架構圖

### Compose 組成樹結構

graph TD
    A[MaterialTheme] --> B[Scaffold]
    B --> C[TopAppBar]
    B --> D[Content]
    B --> E[BottomNavigationBar]
    D --> F[LazyColumn]
    F --> G[Item 1]
    F --> H[Item 2]
    F --> I[Item 3]
    G --> J[Card]
    J --> K[Row]
    K --> L[Image]
    K --> M[Column]
    M --> N[Text: Title]
    M --> O[Text: Description]

---

### 單向資料流模型

graph LR
    A[ViewModel State] -->|向下| B[UI Layer]
    B -->|事件向上| C[Event Handler]
    C -->|更新狀態| A
    
    style A fill:#e1f5ff
    style B fill:#fff4e6
    style C fill:#f3e5f5

---

### Compose 重組流程

sequenceDiagram
    participant State
    participant Compose
    participant UI
    
    State->>Compose: 狀態改變
    Compose->>Compose: 標記需要重組的節點
    Compose->>Compose: 執行重組
    Compose->>UI: 更新受影響的 UI
    Note over Compose: 智慧跳過未改變的部分

---

### 導航架構

graph TB
    A[NavController] --> B[NavHost]
    B --> C[Home Graph]
    B --> D[Search Graph]
    B --> E[Profile Graph]
    C --> C1[Home Screen]
    C --> C2[Detail Screen]
    D --> D1[Search Screen]
    D --> D2[Result Screen]
    E --> E1[Profile Screen]
    E --> E2[Settings Screen]
    
    style A fill:#4caf50
    style B fill:#2196f3
    style C fill:#ff9800
    style D fill:#ff9800
    style E fill:#ff9800

---

## 結語

Jetpack Compose 代表了 Android UI 開發的新時代。透過 Declarative Programming、強大的狀態管理和豐富的工具支援，它讓開發者可以更快速、更可靠地建構現代化的應用程式介面。對於有 Java 和 Spring 背景的開發者，許多概念都是熟悉的：DI、生命週期管理、分層架構等。

從傳統的 View 系統過渡到 Compose 需要一些思維轉換，但一旦掌握了核心概念，你會發現開發效率和程式碼品質都有顯著提升。**關鍵原則不外乎是：保持 Composable 函數純淨、Hoisting 到適當的層級、善用 Effect API 處理 Side Effects、遵循 UDF。**