本頁面由 Cloud Translation API 翻譯而成。

建構 Compose UI

在 Compose 中，使用者介面無法變更，即後無法更新繪製。您可以控制的是 UI 狀態，每當 UI 變更，Compose 會重新建立已變更。可組合函式可接受並公開事件，例如 TextField 會接受值並公開回呼 onValueChange，要求回呼處理常式變更值。

var name by remember { mutableStateOf("") }
OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") }
)ArchitectureSnippets.kt

由於可組合函式接受狀態並公開事件，因此單向資料流最適合搭配 Jetpack Compose 使用本指南著重介紹 Compose 的單向資料流模式、如何實作事件及狀態容器，以及如何在 Compose 中使用 ViewModel。

單向資料流程

單向資料流 (UDF) 是狀態向下流動的設計模式事件數量和事件都會增加只要跟隨單向資料流，您就能分離這些可組合函式會在應用程式儲存的部分顯示狀態的 UI 狀態以及變更狀態

使用單向資料流的應用程式 UI 更新迴圈如下所示：

事件：部分 UI 產生事件並向上傳遞，例如傳遞至 ViewModel 處理的按鈕點選動作；或者是例如指出使用者工作階段已過期。
更新狀態：事件處理常式可能會變更狀態。
顯示狀態：狀態容器向下傳遞狀態，然後在 UI 中顯示。基礎架構

使用 Jetpack Compose 時遵循這個模式可提供幾個優點：

可測試性：從使用者介面分離狀態，更容易分別進行測試
狀態封裝：由於狀態只能在一個位置更新，可組合函式狀態只會有一個可靠資料來源，您可能會因為狀態不一致而產生錯誤
UI 一致性：使用可觀測的狀態容器，例如 StateFlow 或 LiveData。

Jetpack Compose 的單向資料流

基於狀態和事件的可組合函式運作。舉例來說，TextField 僅當 value 參數更新且會顯示 onValueChange 時回呼：要求將值變更為新事件的事件。撰寫將 State 物件定義為值容器，並變更狀態值才會觸發重組程序您可以將狀態保留在 remember { mutableStateOf(value) } 或 rememberSaveable { mutableStateOf(value)，取決於您需要的時間長度請記住值

TextField 可組合值的類型為 String，因此可以從任何位置存取：透過硬式編碼值、從 ViewModel，或從父項可組合函式。您不一定要將其保存在 State 物件中，但您需要，在呼叫 onValueChange 時更新值。

，瞭解如何調查及移除這項存取權。

定義可組合函式的參數

定義可組合函式的狀態參數時，應注意下列事項幾個關鍵問題：

可組合項的可重複使用或靈活性如何？
狀態參數對這個可組合函式的效能有何影響？

為了鼓勵分離和重複使用，每個可組合項應盡可能減少資訊例如，建構可組合元件時新聞文章的標題，最好只傳入而不是整篇新聞報導：

@Composable
fun Header(title: String, subtitle: String) {
    // Recomposes when title or subtitle have changed.
}

@Composable
fun Header(news: News) {
    // Recomposes when a new instance of News is passed in.
}ArchitectureSnippets.kt

有時候，使用個別參數也可以提升成效，例如 News 包含多個資訊，不只是 title 和 subtitle，時新的 News 執行個體會傳遞至 Header(news)，可組合函式會將重組。titlesubtitle

請仔細考量您傳入的參數數量。讓函式具有參數過多會降低函式的人體工學，因此在本例中最好是將這些畫面組合成一個類別

Compose 中的事件

應用程式的所有輸入內容都應以事件表示：輕觸、文字變更、甚至是計時器或其他最新動態當這些事件變更 UI 狀態時 ViewModel 應該是處理這些程式碼並更新 UI 狀態的那個。

UI 層一律不得變更事件處理常式以外的狀態，因為可能會在應用程式中造成不一致和錯誤。

最好傳遞狀態和事件處理常式 lambda 的不可變值。這個的好處如下：

提高可重複使用性。
請確保 UI 不會直接變更狀態值。
避免並行問題，因為您可以確保狀態不會已從另一個執行緒變動。
通常，您可以降低程式碼的複雜度。

舉例來說，接受 String 和 lambda 做為參數的可組合項可以非常容易重複使用假設熱門應用程式則應用程式中一律顯示文字並提供返回按鈕。您可以定義較通用的 MyAppTopAppBar 可組合函式，可接收文字和背面按鈕控點做為參數：

@Composable
fun MyAppTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
    TopAppBar(
        title = {
            Text(
                text = topAppBarText,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center)
            )
        },
        navigationIcon = {
            IconButton(onClick = onBackPressed) {
                Icon(
                    Icons.Filled.ArrowBack,
                    contentDescription = localizedString
                )
            }
        },
        // ...
    )
}ArchitectureSnippets.kt

範例：ViewModel、狀態和事件

使用 ViewModel 和 mutableStateOf 也可以引入單向資料流程。

系統會透過可觀測的狀態容器 (例如 StateFlow 或 LiveData) 公開 UI 狀態。
ViewModel 會處理來自 UI 或其他應用程式層的事件並根據事件更新狀態容器。

舉例來說，如要實作登入畫面，請輕觸「登入」按鈕，應用程式應會顯示進度旋轉圖示和網路呼叫。如果登入成功，然後您的應用程式會切換到其他畫面；在應用程式顯示 Snackbar 錯誤。以下說明如何建立螢幕狀態的模型以及事件：

畫面共有四種狀態：

已登出：使用者尚未登入。
進行中：應用程式目前嘗試讓使用者透過以及執行網路呼叫
錯誤：登入時發生錯誤。
已登入：使用者已登入。

您可以模擬這些狀態，做為密封類別。ViewModel 會將狀態顯示為 State、設定初始狀態，並視需要更新狀態。 ViewModel 也會公開 onSignIn() 方法，處理登入事件。

class MyViewModel : ViewModel() {
    private val _uiState = mutableStateOf<UiState>(UiState.SignedOut)
    val uiState: State<UiState>
        get() = _uiState

    // ...
}ArchitectureSnippets.kt

除了 mutableStateOf API 之外，Compose 也提供適用於 LiveData、Flow 和的擴充功能 Observable 註冊為事件監聽器並將值顯示為狀態。

class MyViewModel : ViewModel() {
    private val _uiState = MutableLiveData<UiState>(UiState.SignedOut)
    val uiState: LiveData<UiState>
        get() = _uiState

    // ...
}

@Composable
fun MyComposable(viewModel: MyViewModel) {
    val uiState = viewModel.uiState.observeAsState()
    // ...
}ArchitectureSnippets.kt