Menu
I want to use a LiveData<List<DataClass>> to be the source of my state in a @Composable function.
I cannot use the new @Model annotation, I have seen in this talk Link(at 32:06) it is possible to use LiveData, Flow, etc. by invoking the function +observe(/* Data */).
To the problem: I cannot find the function used in the video (+observe()) or any other way to use LiveData as an origin. How can I use LiveData inside my @Compose function?
Project Gradle:
buildscript {
ext.kotlin_version = '1.3.60-eap-76'
repositories {
google()
jcenter()
maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
}
dependencies {
classpath 'com.android.tools.build:gradle:4.0.0-alpha04'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
App gradle: Dependencies:
def lifecycle_version = "2.1.0"
def compose_version = "0.1.0-dev02"
// ViewModel and LiveData
implementation "androidx.lifecycle:lifecycle-extensions:$lifecycle_version"
kapt "androidx.lifecycle:lifecycle-compiler:$lifecycle_version"
androidTestImplementation "androidx.arch.core:core-testing:$lifecycle_version"
implementation "androidx.compose:compose-runtime:$compose_version"
kapt "androidx.compose:compose-compiler:$compose_version"
// Android Compose
implementation "androidx.ui:ui-layout:$compose_version"
implementation "androidx.ui:ui-foundation:$compose_version"
implementation "androidx.ui:ui-framework:$compose_version"
implementation "androidx.ui:ui-tooling:$compose_version"
implementation "androidx.ui:ui-android-text:$compose_version"
implementation "androidx.ui:ui-text:$compose_version"
implementation "androidx.ui:ui-material:$compose_version"
997
The general pattern for state hoisting in Jetpack Compose is to replace the state variable with two parameters: value: T : the current value to display. onValueChange: (T) -> Unit : an event that requests the value to change, where T is the proposed new value.
There are two ways to declare the data within a ViewModel so that it is observable. One option is to use the Compose state mechanism which has been used extensively throughout this book. An alternative approach is to use the Jetpack LiveData component, a topic that will be covered later in this chapter.
Recomposition is when Jetpack Compose re-executes the composables that may have changed in response to state changes, and then updates the Composition to reflect any changes. A Composition can only be produced by an initial composition and updated by recomposition.
Attach the Observer object to the LiveData object using the observe() method. The observe() method takes a LifecycleOwner object. This subscribes the Observer object to the LiveData object so that it is notified of changes. You usually attach the Observer object in a UI controller, such as an activity or fragment.
Here is another way to observe live data using state. There is an extension function for this just include it.
add gradle dependency below one:
implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta01'
now just convert your regular LiveData to State for example.
val breedItems by doggoViewModel.liveBreedData().observeAsState()
answered Oct 17 '22 11:10
As some already pointed out you need to add the new dependency to build.gradle
implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta01'
And then simply:
val name: String by viewModel.name.observeAsState("")
If this does not work for you try the next below. The above syntax is clearly the better one and is also recommended but did not work for me.
val nameState: State<String> = viewModel.name.observeAsState("")
nameState.value
See also the documentation about state here https://developer.android.com/jetpack/compose/state#viewmodel-state
15
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
