觀察 livedata 並在 jetpack compose 中導航

Question

我剛開始學習jetpack compose。 我有一個非常基本的問題。 我的 ViewModel 有一個 SingleLiveEvent，我用它來導航到另一個屏幕。

private val _navigateToDetails: SingleLiveEvent<Movie> = SingleLiveEvent()
val navigateToDetails: MutableLiveData<Movie> = _navigateToDetails

我知道我可以使用 Livedata 作為 state 來發出 UI，但是如何使用它來觸發可組合中的某些操作。

以前我使用viewLifecycleOwner來觀察 state，因為任何人都會這樣做。

viewModel.navigateToDetails.observe(viewLifecycleOwner) {
    // navigate to details
}

我如何在撰寫中實現相同的目標。 我不知道這是否可能。 也許我並沒有以撰寫方式思考這一點。 任何幫助，將不勝感激。

Answer 1

實際上，在 compose 中我們使用mutableStateOf()而不是 LiveData。 在您的視圖模型中，您可以將數據持有者的類型從 LiveData 更改為 mutableStateOf(...) 這將允許您直接在 Composables 中使用它，而無需顯式調用 observe()

假設您希望在您的視圖模型中存儲任何類型的 integer 並基於此更新您的 Composable 的 state。

在您的視圖模型中，

var mInteger by mutableStateOf (0) //'by' helps treat state as data

fun updateMInteger(newValue: Int){
mInteger = newValue
}

在您的 Composable 中，直接調用viewmodel.mInteger並像這樣構建 Compose，自動更新 UI，因為 mInteger 是從 Composable 中讀取的

喜歡

Text(viewModel.mInteger)

Answer 2

我會做一些事情來確保我只做一次：

@Composable
fun LoginScreen(viewModel: LoginViewModel) {
    val loginState by viewModel.loginState.observeAsState(null)
    val hasHandledNavigation = remember { mutableStateOf(false)}
    if (loginState != null && !hasHandledNavigation.value ) {
        navigateToWelcomeScreen()
    else {
        // rest of the Compose UI
    }
}