15-Jetpack Compose安卓聲明式UI開發(fā)從零手寫一個計時器剛開始接觸 Jetpack Compose 的時候相信很多朋友都有類似的感受看官方文檔時覺得“聲明式 UI”這個概念很好理解可真到自己動手寫界面的時候又會卡在狀態(tài)管理、重組機制、協(xié)程調(diào)用這些細節(jié)上尤其是做一個帶倒計時功能的計時器既要處理時間刷新又要把進度環(huán)畫出來還要考慮暫停、重置這些交互看似簡單的功能實際寫起來并沒有想象中那么順利。這篇文章就圍繞一個完整的“制作計時器”實戰(zhàn)項目展開。我們會從聲明式 UI 的核心概念入手逐步完成環(huán)境配置、界面編寫、倒計時邏輯、進度條繪制和問題排查。整個過程不依賴第三方庫只使用 Jetpack Compose 提供的狀態(tài)、協(xié)程和繪制 API適合有一定 Kotlin 基礎、正在學習 Compose 的安卓開發(fā)者也適合想通過一個小項目把聲明式 UI 思路真正落到代碼里的初學者。學完這篇文章你可以掌握 Compose 中Composable函數(shù)的用法、State和重組機制、remember狀態(tài)保存、LaunchedEffect協(xié)程啟動方式以及 Canvas 繪制進度環(huán)的基本套路。更重要的是你會理解為什么聲明式 UI 開發(fā)中“狀態(tài)驅(qū)動界面”這句話如此重要。1. 為什么要用 Jetpack Compose 制作計時器1.1 計時器為什么適合作為 Compose 入門項目計時器這個項目小但五臟俱全。它需要界面展示、按鈕交互、定時刷新、狀態(tài)切換、自定義繪制幾乎覆蓋了 Compose 開發(fā)中最常用的一整套知識。如果只是寫一個靜態(tài)頁面你很難體會到 Compose 和傳統(tǒng) View 體系的區(qū)別但如果一上來就做電商首頁、視頻列表這種大型頁面又會因為涉及大量架構(gòu)問題而影響對基礎概念的理解。計時器剛好卡在中間代碼量不大但能完整展示一個由狀態(tài)驅(qū)動界面變化的開發(fā)流程。在傳統(tǒng) View 體系中要實現(xiàn)倒計時效果一般會用CountDownTimer或者Handler不斷更新TextView的文本。這種方式本質(zhì)上是“命令式”的開發(fā)者需要主動告訴控件“你現(xiàn)在要把文字改成什么”。而 Compose 的寫法完全相反我們只需要定義“狀態(tài)是什么樣界面就應該長什么樣”剩下的交給 Compose 自動處理。1.2 什么是聲明式 UI先看一個非常直觀的對比。傳統(tǒng) View 寫法通常是這樣的TextView textView findViewById(R.id.tv_time); textView.setText(01:00);而 Compose 的寫法是這樣的Text( text formattedTime, style MaterialTheme.typography.headlineLarge )區(qū)別在于在 Compose 中formattedTime是一個狀態(tài)變量。當這個變量的值發(fā)生變化時使用它的Text會自動重新執(zhí)行界面自然就刷新了。開發(fā)者不需要手動調(diào)用任何setText方法。這就是“聲明式 UI”的核心思路我們聲明界面在不同狀態(tài)下的樣子狀態(tài)變化后框架負責把界面更新到最新狀態(tài)。1.3 計時器涉及的核心知識點做一個計時器你會用到下面這些 Compose 核心概念概念在計時器中的作用Composable函數(shù)定義界面結(jié)構(gòu)比如文字、按鈕、畫布State/mutableStateOf保存剩余時間、運行狀態(tài)等可變數(shù)據(jù)remember讓狀態(tài)在重組時不丟失LaunchedEffect啟動協(xié)程實現(xiàn)每秒鐘倒計時的效果Canvas繪制進度圓環(huán)事件處理點擊開始、暫停、重置按鈕時更新狀態(tài)把這幾個概念徹底搞清楚你在 Compose 開發(fā)中的地基就基本打牢了。2. 環(huán)境準備與版本說明2.1 開發(fā)工具準備在開始寫代碼之前需要先準備好開發(fā)環(huán)境。操作系統(tǒng)Windows / macOS / Linux 均可開發(fā)工具Android Studio 最新穩(wěn)定版語言版本Kotlin 1.9 或更高版本構(gòu)建工具Gradle 8.x最低支持系統(tǒng)版本建議minSdk 24目標版本建議compileSdk 34或你的項目實際使用的版本如果你已經(jīng)安裝了 Android Studio可以在Settings - Plugins中確認 Kotlin 插件狀態(tài)。新版本的 Android Studio 默認會內(nèi)置 Kotlin 和 Jetpack Compose 支持不需要額外安裝插件。2.2 創(chuàng)建項目打開 Android Studio選擇New Project - Empty Activity項目名稱可以設置為ComposeTimer包名使用你自己的域名反寫例如com.example.composetimer。創(chuàng)建完成后Android Studio 會自動生成一個基于 Compose 的模板項目。模板中已經(jīng)包含MainActivity.ktui/theme/目錄下的主題相關文件build.gradle.kts配置文件如果你的 Android Studio 版本比較老創(chuàng)建項目時沒有自動選擇 Compose 模板也可以手動在build.gradle.kts中添加依賴。2.3 build.gradle.kts 基礎配置下面給出一個典型的 Compose 項目配置文件以 Groovy DSL 為例// 文件路徑app/build.gradle plugins { id com.android.application id org.jetbrains.kotlin.android } android { namespace com.example.composetimer compileSdk 34 defaultConfig { applicationId com.example.composetimer minSdk 24 targetSdk 34 versionCode 1 versionName 1.0 } buildFeatures { compose true } compileOptions { sourceCompatibility JavaVersion.VERSION_17 targetCompatibility JavaVersion.VERSION_17 } kotlinOptions { jvmTarget 17 } } dependencies { def composeBom platform(androidx.compose:compose-bom:2024.06.00) implementation composeBom implementation androidx.core:core-ktx:1.13.1 implementation androidx.lifecycle:lifecycle-runtime-ktx:2.8.3 implementation androidx.activity:activity-compose:1.9.0 implementation androidx.compose.ui:ui implementation androidx.compose.ui:ui-graphics implementation androidx.compose.ui:ui-tooling-preview implementation androidx.compose.material3:material3 }如果你使用的是 Kotlin 2.0 及以上版本還需要注意 Compose 編譯器的配置方式。Kotlin 2.0 開始Compose 編譯器插件已經(jīng)合并到 Kotlin 插件中使用方式如下plugins { id com.android.application id org.jetbrains.kotlin.android id org.jetbrains.kotlin.plugin.compose }版本需要根據(jù)你的項目實際情況調(diào)整本文示例以常見環(huán)境為例重點演示配置思路。如果你的項目使用的是 KTSKotlin DSL格式需要把上面的 Groovy 語法轉(zhuǎn)換成對應的 Kotlin 語法。3. 聲明式 UI 核心概念拆解在寫計時器代碼之前有必要先理解幾個核心概念。這些概念不僅計時器要用以后寫任何 Compose 應用都會用到。3.1 Composable 可組合函數(shù)在 Compose 中每個界面元素都是一個帶Composable注解的普通函數(shù)。函數(shù)可以接收參數(shù)返回值不直接是界面對象而是描述界面的“說明”。Composable fun Greeting(name: String) { Text(text 你好$name) }Greeting函數(shù)接收一個name參數(shù)輸出一段文本。函數(shù)內(nèi)部可以調(diào)用其他Composable函數(shù)這種組合方式就是“可組合”這個名字的由來。3.2 State 與重組Compose 界面是狀態(tài)驅(qū)動的。我們用mutableStateOf創(chuàng)建一個狀態(tài)對象var count by remember { mutableStateOf(0) }這里的count就是一個狀態(tài)變量。當count的值發(fā)生變化時所有讀取了這個變量的可組合函數(shù)都會自動重新執(zhí)行這個過程叫“重組”。需要特別注意的是只有狀態(tài)變化count變化才可能觸發(fā)重組。普通 Kotlin 變量并不會觸發(fā)界面刷新。3.3 remember 的作用remember的作用是讓狀態(tài)在重組時不被重置。如果不使用remember函數(shù)每次重組都會重新執(zhí)行里面的初始化代碼那狀態(tài)就永遠只能停留在初始值了。使用remember后Compose 會記住這個值在不同重組之間保持它的存在。var count by remember { mutableStateOf(0) } // 重組后 count 不會歸零另外還有一個更進階的rememberSaveable它不僅能跨重組保存狀態(tài)還能在 Activity 被系統(tǒng)銷毀重建時保存狀態(tài)后面我們會提到。3.4 LaunchedEffect 與協(xié)程Compose 中做倒計時這類周期任務最常用的方式是LaunchedEffect。它的作用是在可組合函數(shù)進入組合時啟動一個協(xié)程并在指定參數(shù)變化時取消舊協(xié)程并重新啟動。LaunchedEffect(isRunning) { while (isRunning) { delay(1000L) // 更新剩余時間 } }這里有一個很關鍵的設計LaunchedEffect(isRunning)的 key 是isRunning。當isRunning從false變?yōu)閠rue時協(xié)程重新啟動開始倒計時當isRunning變?yōu)閒alse時協(xié)程被取消倒計時停止。3.5 事件回調(diào)按鈕點擊在 Compose 中通過onClick回調(diào)處理Button(onClick { isRunning !isRunning }) { Text(if (isRunning) 暫停 else 開始) }點擊按鈕后isRunning狀態(tài)改變界面自動重組按鈕文字也會隨之變化。整個過程不需要手動刷新任何控件。4. 完整實戰(zhàn)用 Jetpack Compose 制作一個計時器現(xiàn)在進入核心環(huán)節(jié)我們一步步搭建這個計時器應用。4.1 設計目標和效果先明確我們要實現(xiàn)的功能顯示一個 60 秒倒計時點擊“開始”按鈕倒計時開始點擊“暫?！卑粹o倒計時暫停點擊“重置”按鈕恢復成 60 秒界面中央顯示剩余時間時間外圈顯示進度環(huán)剩余時間越少進度環(huán)越短整體效果就是一個非常典型的計時器 App。4.2 項目結(jié)構(gòu)我們會在MainActivity.kt中編寫主要代碼并把界面拆分成以下幾個函數(shù)便于閱讀和維護MainActivityActivity 入口TimerScreen計時器主界面負責管理狀態(tài)TimerCircle繪制進度環(huán)并顯示剩余時間formatTime時間格式化工具函數(shù)最終目錄結(jié)構(gòu)大致如下app/src/main/java/com/example/composetimer/ ├── MainActivity.kt └── ui/theme/ui/theme目錄由模板自動生成我們不需要做任何修改。4.3 編寫時間格式化工具先寫一個簡單的函數(shù)把毫秒數(shù)格式化為MM:SS格式// 文件路徑app/src/main/java/com/example/composetimer/MainActivity.kt fun formatTime(millis: Long): String { val totalSeconds millis / 1000 val minutes totalSeconds / 60 val seconds totalSeconds % 60 return String.format(%02d:%02d, minutes, seconds) }假設傳入61000毫秒計算結(jié)果就是01:01。如果希望顯示毫秒級精度可以改成下面這種格式fun formatTimeWithMillis(millis: Long): String { val totalSeconds millis / 1000 val minutes totalSeconds / 60 val seconds totalSeconds % 60 val millisPart millis % 1000 / 100 return String.format(%02d:%02d.%d, minutes, seconds, millisPart) }計時器一般不需要顯示毫秒所以我們使用前面那個版本。4.4 主界面代碼在MainActivity.kt中完整代碼如下package com.example.composetimer import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Canvas import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedButton import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.StrokeCap import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.composetimer.ui.theme.ComposeTimerTheme import kotlinx.coroutines.delay class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeTimerTheme { TimerScreen() } } } } Composable fun TimerScreen() { val totalTime 60_000L var remainTime by remember { mutableStateOf(totalTime) } var isRunning by remember { mutableStateOf(false) } LaunchedEffect(isRunning) { while (isRunning) { delay(1000L) remainTime - 1000L if (remainTime 0L) { remainTime 0L isRunning false } } } val progress if (totalTime 0L) 0f else remainTime.toFloat() / totalTime Column( modifier Modifier .fillMaxSize() .padding(24.dp), horizontalAlignment Alignment.CenterHorizontally, verticalArrangement Arrangement.Center ) { TimerCircle( progress progress, remainTime remainTime ) Spacer(modifier Modifier.height(48.dp)) Row( horizontalArrangement Arrangement.spacedBy(24.dp) ) { Button( onClick { isRunning !isRunning } ) { Text(if (isRunning) 暫停 else 開始) } OutlinedButton( onClick { isRunning false remainTime totalTime } ) { Text(重置) } } } } Composable fun TimerCircle(progress: Float, remainTime: Long) { Box( contentAlignment Alignment.Center ) { Canvas( modifier Modifier.size(220.dp) ) { val strokeWidth 12.dp.toPx() val diameter size.minDimension - strokeWidth val topLeft Offset( (size.width - diameter) / 2f, (size.height - diameter) / 2f ) val arcSize Size(diameter, diameter) // 底部淺灰色底環(huán) drawArc( color Color.LightGray, startAngle 0f, sweepAngle 360f, useCenter false, topLeft topLeft, size arcSize, style Stroke(width strokeWidth, cap StrokeCap.Round) ) // 彩色進度環(huán) drawArc( color MaterialTheme.colorScheme.primary, startAngle -90f, sweepAngle 360f * progress, useCenter false, topLeft topLeft, size arcSize, style Stroke(width strokeWidth, cap StrokeCap.Round) ) } Text( text formatTime(remainTime), style MaterialTheme.typography.headlineLarge, fontWeight FontWeight.Bold ) } } Preview(showBackground true) Composable fun TimerPreview() { ComposeTimerTheme { TimerScreen() } }4.5 核心代碼解釋這段代碼中最關鍵的是LaunchedEffect和Canvas兩個部分這里逐一解釋。LaunchedEffect 倒計時邏輯LaunchedEffect(isRunning) { while (isRunning) { delay(1000L) remainTime - 1000L if (remainTime 0L) { remainTime 0L isRunning false } } }當isRunning為true時協(xié)程啟動每隔 1000 毫秒將remainTime減去 1000 毫秒。當remainTime小于等于 0 時將剩余時間設置為 0同時把isRunning改為false這樣循環(huán)就會退出按鈕文字也會自動變回“開始”。這里需要注意while (isRunning)中的isRunning是狀態(tài)變量協(xié)程每次循環(huán)都會讀取它的最新值。所以你點擊“暫?！卑粹o時isRunning變成false協(xié)程下一次循環(huán)判斷條件不滿足自然退出。Canvas 進度環(huán)drawArc方法用于繪制圓弧。我們畫了兩條圓弧底層圓弧顏色為淺灰色從 0 度到 360 度畫一個完整的圓。上層圓弧顏色為主題色從 -90 度開始掃過360f * progress度。這里startAngle -90f是為了讓進度環(huán)從頂部開始而不是從 3 點鐘方向開始。Stroke(width strokeWidth, cap StrokeCap.Round)指定了線寬和圓角線帽這樣繪制出來的進度環(huán)兩端是圓潤的視覺效果更好。4.6 運行與驗證將項目同步到手機或模擬器后點擊運行按鈕。你會看到以下效果界面正中顯示一個圓形進度環(huán)環(huán)中間顯示01:00點擊“開始”按鈕進度環(huán)開始逐漸縮短時間開始倒計時點擊“暫停”按鈕倒計時暫停點擊“重置”按鈕時間和進度環(huán)恢復初始狀態(tài)如果一切正常恭喜你第一個 Jetpack Compose 計時器應用已經(jīng)完成了。5. 深入進階使用 ViewModel 管理計時器狀態(tài)如果只是做一個演示項目把狀態(tài)直接寫在TimerScreen里完全夠用。但在真實項目中我們更推薦把業(yè)務邏輯和界面分離使用ViewModel管理狀態(tài)。這樣做的原因主要有三個狀態(tài)不會在界面重組時丟失界面旋轉(zhuǎn)時狀態(tài)仍然保留邏輯可以獨立測試5.1 添加 ViewModel 依賴在app/build.gradle中添加implementation androidx.lifecycle:lifecycle-viewmodel-compose:2.8.35.2 編寫 TimerViewModelpackage com.example.composetimer import androidx.lifecycle.ViewModel import androidx.lifecycle.viewModelScope import kotlinx.coroutines.Job import kotlinx.coroutines.delay import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.StateFlow import kotlinx.coroutines.flow.asStateFlow import kotlinx.coroutines.launch class TimerViewModel : ViewModel() { private val _remainTime MutableStateFlow(60_000L) val remainTime: StateFlowLong _remainTime.asStateFlow() private val _isRunning MutableStateFlow(false) val isRunning: StateFlowBoolean _isRunning.asStateFlow() private var timerJob: Job? null private val totalTime 60_000L fun start() { if (_isRunning.value) return _isRunning.value true timerJob viewModelScope.launch { while (_remainTime.value 0) { delay(1000L) _remainTime.value - 1000L } _isRunning.value false } } fun pause() { _isRunning.value false timerJob?.cancel() } fun reset() { _isRunning.value false timerJob?.cancel() _remainTime.value totalTime } }MutableStateFlow是 Kotlin 協(xié)程庫中的狀態(tài)容器配合StateFlow可以在 Compose 中直接觀察。相比普通的remember { mutableStateOf() }ViewModel 中的狀態(tài)生命周期更長更適合承載業(yè)務數(shù)據(jù)。5.3 在 Compose 中收集 StateFlow使用 ViewModel 時界面代碼需要配合collectAsState()或collectAsStateWithLifecycle()來訂閱狀態(tài)變化。Composable fun TimerScreen(viewModel: TimerViewModel viewModel()) { val remainTime by viewModel.remainTime.collectAsState() val isRunning by viewModel.isRunning.collectAsState() val progress if (remainTime 0L) 0f else remainTime.toFloat() / 60_000f Column( modifier Modifier .fillMaxSize() .padding(24.dp), horizontalAlignment Alignment.CenterHorizontally, verticalArrangement Arrangement.Center ) { TimerCircle(progress progress, remainTime remainTime) Spacer(modifier Modifier.height(48.dp)) Row(horizontalArrangement Arrangement.spacedBy(24.dp)) { Button(onClick { viewModel.start() }) { Text(if (isRunning) 暫停 else 開始) } OutlinedButton(onClick { viewModel.reset() }) { Text(重置) } } } }注意這里按鈕的onClick和之前的寫法不太一樣。開始按鈕觸發(fā)的邏輯取決于當前是否在運行如果正在運行點擊應該暫停如果已停止點擊應該開始。因此 ViewModel 中應該提供一個綜合的toggle()方法fun toggle() { if (_isRunning.value) { pause() } else { start() } }然后在界面中調(diào)用onClick { viewModel.toggle() }。這樣邏輯更清晰界面代碼更簡單。6. 常見問題與排查思路在實際開發(fā)過程中新手經(jīng)常會遇到下面這些問題。這里整理了一個排查清單幫助大家快速定位。問題現(xiàn)象常見原因解決思路點擊按鈕后界面沒有變化狀態(tài)變量沒有使用mutableStateOf或沒有加by remember檢查狀態(tài)聲明是否寫成var count by remember { mutableStateOf(...) }倒計時一次跳好幾秒多個LaunchedEffect同時運行或多次點擊開始了多個協(xié)程確保LaunchedEffect的 key 正確或者使用 ViewModel 統(tǒng)一管理協(xié)程旋轉(zhuǎn)屏幕后計時狀態(tài)丟失remember只能跨重組保存狀態(tài)不能跨 Activity 重建保存改用rememberSaveable或 ViewModel倒計時不夠精確時間越走越慢delay只是延遲執(zhí)行不保證精確間隔系統(tǒng)調(diào)度會有誤差使用SystemClock.elapsedRealtime()計算真實經(jīng)過時間詳見下一節(jié)編譯報錯Compose compiler 與 Kotlin 版本不兼容Kotlin 版本和 Compose 編譯器版本不匹配使用 Kotlin 2.0 及以上版本時添加org.jetbrains.kotlin.plugin.compose插件Canvas 繪制的圓環(huán)位置偏移沒有處理好尺寸計算使用size.minDimension計算直徑并通過topLeft居中6.1 編譯報錯Compose compiler 版本不兼容這是一個非常常見的問題。早期Compose 編譯器需要單獨指定版本并且與 Kotlin 版本嚴格對應。從 Kotlin 2.0 開始Compose 編譯器插件隨 Kotlin 一起發(fā)布你只需要在plugins中添加id org.jetbrains.kotlin.plugin.compose如果仍然遇到版本相關的編譯錯誤可以先檢查項目的 Gradle 和 Kotlin 插件版本然后同步項目。6.2 狀態(tài)不刷新有時候你會發(fā)現(xiàn)明明修改了變量但界面沒有變化。最常見的原因是使用了普通變量而不是mutableStateOf。// 錯誤寫法 var count 0 Text(text count: $count) Button(onClick { count }) // 正確寫法 var count by remember { mutableStateOf(0) } Text(text count: $count) Button(onClick { count })只有mutableStateOf創(chuàng)建的狀態(tài)對象才能觸發(fā) Compose 重組。普通 Kotlin 變量不會讓界面更新。6.3 精確計時的實現(xiàn)前面我們用delay(1000L)實現(xiàn)倒計時這種方法在大多數(shù)場景下夠用但如果用戶長時間運行累積誤差可能比較明顯。更精確的做法是記錄開始時間再用當前時間減去開始時間換算剩余時。Composable fun PreciseTimerScreen() { val totalTime 60_000L var remainTime by remember { mutableStateOf(totalTime) } var isRunning by remember { mutableStateOf(false) } var startTime by remember { mutableStateOf(0L) } LaunchedEffect(isRunning) { if (isRunning) { startTime SystemClock.elapsedRealtime() while (isRunning) { val elapsed SystemClock.elapsedRealtime() - startTime remainTime (totalTime - elapsed).coerceAtLeast(0L) if (remainTime 0L) { isRunning false } delay(100L) // 刷新頻率可以更高 } } } // 界面代碼略 }注意暫停后重新開始時需要把已過去的時間扣除不能直接從總時間重新計算。通常需要一個initialRemainTime字段記錄暫停時剩余的時間var remainBeforePause by remember { mutableStateOf(totalTime) } fun onPause() { remainBeforePause remainTime isRunning false } LaunchedEffect(isRunning) { if (isRunning) { startTime SystemClock.elapsedRealtime() while (isRunning) { val elapsed SystemClock.elapsedRealtime() - startTime remainTime (remainBeforePause - elapsed).coerceAtLeast(0L) if (remainTime 0L) { isRunning false } delay(100L) } } }7. 最佳實踐與工程建議計時器項目雖小但通過它可以提煉出一套適用于整個 Compose 開發(fā)的最佳實踐。這里分享幾個在真實項目中比較重要的建議。7.1 狀態(tài)提升與狀態(tài)容器在 Compose 中如果某個狀態(tài)需要被多個組件共享就應該把狀態(tài)提升到它們的共同父級。比如TimerScreen中的remainTime和isRunning被TimerCircle和按鈕共同使用所以放在TimerScreen這一層。當業(yè)務邏輯變復雜時更推薦把狀態(tài)和邏輯放進 ViewModel。ViewModel 不依賴界面天然支持單元測試而且和 Compose 的狀態(tài)系統(tǒng)配合得很好。推薦的層級是Activity / Fragment ↓ ViewModel (持有業(yè)務狀態(tài)) ↓ Composable (調(diào)用 viewModel.collectAsState() 獲取狀態(tài)) ↓ 子 Composable (只負責展示和回調(diào))7.2 rememberSaveable 與狀態(tài)恢復普通remember保存的狀態(tài)在 Activity 被系統(tǒng)回收后可能丟失。如果狀態(tài)比較簡單且不想引入 ViewModel可以使用rememberSaveablevar remainTime by rememberSaveable { mutableStateOf(60_000L) } var isRunning by rememberSaveable { mutableStateOf(false) }rememberSaveable會在 Activity 重建時恢復狀態(tài)。不過它需要狀態(tài)可以被序列化保存到 Bundle 中對于復雜的自定義對象可能需要自定義Saver。7.3 避免在 Composable 中執(zhí)行耗時操作Composable 函數(shù)可能在主線程執(zhí)行也可能因為重組而頻繁調(diào)用。不要在 Composable 函數(shù)體中執(zhí)行 IO 操作、網(wǎng)絡請求或復雜計算。耗時操作應該放入?yún)f(xié)程或者放在 ViewModel 中通過viewModelScope執(zhí)行。7.4 使用字符串資源界面中直接寫中文文字雖然方便但不推薦在生產(chǎn)項目中這樣做。更好的做法是把字符串放到res/values/strings.xml中然后通過stringResource()獲取!-- 文件路徑app/src/main/res/values/strings.xml -- resources string namestart開始/string string namepause暫停/string string namereset重置/string /resourcesText(if (isRunning) stringResource(R.string.pause) else stringResource(R.string.start))這樣方便日后做多語言適配也避免字符串散落在代碼中。7.5 關注生命周期與協(xié)程安全如果直接在 Composable 中使用rememberCoroutineScope()啟動協(xié)程協(xié)程的生命周期會綁定到組合的聲明周期。當 Composable 退出組合時協(xié)程會被自動取消。這一點在使用協(xié)程時非常方便但也要注意如果你創(chuàng)建了一個不通過rememberCoroutineScope管理的協(xié)程它可能會在界面銷毀后繼續(xù)執(zhí)行造成內(nèi)存泄漏。使用 ViewModel 時viewModelScope是跨界面存活的必須小心在onCleared()中取消不需要的任務。不過大多數(shù)情況下倒計時任務在 ViewModel 清除時自動取消即可。7.6 UI 測試Compose 提供了createComposeRule來編寫界面測試。對于計時器可以這樣測試開始按鈕的功能RunWith(AndroidJUnit4::class) class TimerScreenTest { get:Rule val composeTestRule createComposeRule() Test fun click_start_button_shows_pause_text() { composeTestRule.setContent { TimerScreen() } composeTestRule .onNodeWithText(開始) .performClick() composeTestRule .onNodeWithText(暫停) .assertIsDisplayed() } }這種測試可以直接驗證用戶點擊后的界面表現(xiàn)不需要啟動完整的應用。8. 總結(jié)與下一步學習路線通過這個計時器項目我們完整走了一遍 Jetpack Compose 開發(fā)流程核心收獲有三個。第一理解了聲明式 UI 的思想。Compose 中的界面由狀態(tài)驅(qū)動狀態(tài)變化后框架自動更新界面開發(fā)者不需要手動操作控件。第二掌握了 Compose 基礎 API 的使用。包括Composable函數(shù)、mutableStateOf、remember、LaunchedEffect、Canvas等這些是 Compose 開發(fā)最常用的基礎能力。第三建立了 Compose 項目的基本工程意識。把業(yè)務邏輯放進 ViewModel把狀態(tài)和界面分離把字符串抽取到資源文件這些習慣會讓你在寫更大的項目時受益無窮。如果你已經(jīng)掌握了本文的內(nèi)容下一步可以嘗試這些方向給計時器增加更多預設時長例如 1 分鐘、3 分鐘、5 分鐘切換增加通知提醒或震動反饋在時間歸零時提示用戶把進度環(huán)擴展成可點擊拖拽的元素做成計時設置控件學習 Compose Navigation把計時器頁面和設置頁面串聯(lián)起來深入學習 Compose 動畫 API為進度環(huán)增加平滑過渡效果計時器只是一個很小的起點但它的背后是 Compose 狀態(tài)管理、協(xié)程、繪制、測試一整條知識鏈。把這套鏈路走通后面的路就會順暢很多。如果這篇文章對你有幫助可以把它收藏備用。也建議你把這篇文章中的代碼按照自己的理解重新敲一遍而不是直接復制運行動手實踐對理解 Compose 非常重要。