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