如何在使用Compose中的导航时在芯片内保存UI状态？

huangapple
go评论83阅读模式
英文:

How to save UI state within a chip while using navigation in compose?

问题

I have a chip that changes configurations when being clicked on. However, as the user navigates back (popbackstack) or navigates to another screen, the clicked chip re-sets its previous position. As I understood, I will have to use a viewmodel to pass the chips state and in that way save it? I cant find a way though to store the "remembersavable" in a viewmodel.

How can I achieve this? Appreciate any feedback!

My example chip:

  1. @Composable
  2. fun CatsChip() {
  4.     val textChipRememberOneState = rememberSaveable { mutableStateOf(false) }
  6.     TextChip(
  7.         isSelected = textChipRememberOneState.value,
  8.         shape = Shapes(medium = RoundedCornerShape(15.dp)),
  9.         text = "Cats",
  10.         selectedColor = LightGreen,
  11.         onChecked = {
  12.             textChipRememberOneState.value = it
  13.         },
  14.     )
  15. }
英文:

I have a chip that changes configurations when being clicked on. However, as the user navigates back (popbackstack) or navigates to another screen, the clicked chip re-sets its previous position. As I understood, I will have to use a viewmodel to pass the chips state and in that way save it? I cant find a way though to store the "remembersavable" in a viewmodel.

How can I achieve this? Appreciate any feedback!

My example chip:

  1. @Composable
  2. fun CatsChip() {
  4.     val textChipRememberOneState = rememberSaveable { mutableStateOf(false) }
  6.     TextChip(
  7.         isSelected = textChipRememberOneState.value,
  8.         shape = Shapes(medium = RoundedCornerShape(15.dp)),
  9.         text = "Cats",
  10.         selectedColor = LightGreen,
  11.         onChecked = {
  12.             textChipRememberOneState.value = it
  13.         },
  14.     )
  15. }

答案1

得分: 1

以下是您要翻译的内容：

You can keep the state in a MutableStateFlow in a ViewModel.

To use ViewModels in Compose you need to add the following dependency to your app/build.gradle file

  1. implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")

Now you can use the viewModel() function to get the ViewModel instance in your composables.

With ViewModels you do not need to use rememberSaveable anymore, since the state will be kept in the ViewModel, however, if you want the state to persist even across process death (not just configuration changes), then you have to save the state in the SavedStateHandle.

Here is an example of a ViewModel that only keeps the state in memory, but does not save it in the SavedStateHandle.

  1. class MemoryOnlyViewModel : ViewModel () {
  2.     val checkedState = MutableStateFlow(false)
  4.     fun onCheckedChange(isChecked: Boolean) = checkedState.update { isChecked }
  5. }

Here is an example of a ViewModel that saves the state in the SavedStateHandle.

  1. class SavedStateViewModel(private val state: SavedStateHandle) : ViewModel() {
  2.     val checkedState = state.getStateFlow(key = CHECKED_STATE_KEY, initialValue = false)
  4.     fun onCheckedChange(isSelected: Boolean) = state.set(key = CHECKED_STATE_KEY, value = isSelected)
  6.     companion object {
  7.         private const val CHECKED_STATE_KEY = "checkedState"
  8.     }
  9. }

Then the usage would look like this

  1. import androidx.compose.runtime.getValue
  2. import androidx.compose.runtime.setValue
  3.         
  4. @Composable
  5. fun CatsChip() {
  6.     val vm: SavedStateViewModel = viewModel() // or: val vm = viewModel<SavedStateViewModel>()
  7.     val catsChipState by vm.checkedState.collectAsState()
  9.     TextChip(
  10.         isSelected = catsChipState,
  11.         shape = Shapes(medium = RoundedCornerShape(15.dp)),
  12.         text = "Cats",
  13.         selectedColor = LightGreen,
  14.         onChecked = vm::onCheckedChange, // or: onChecked = { vm.onCheckedChange(it) }
  15.     )
  16. }

For more use cases see also the Business Logic section of the Compose State Hoisting documentation

Here is a demo Composable using Compose navigation and showcasing the two view models from above,
comparing it with rememberSaveable, scoping them in two different ways, to the parent context and to
the NavBackStackEntry. This shows how different scopes affect the lifecycle of ViewModels.

Requires the Compose navigation dependency in your app/build.gradle file

  1. implementation("androidx.navigation:navigation-compose:2.5.3")

You can check the demo by calling Demo() in some composable content of your app.
Click the buttons to navigate and see how the backstack changes. The ViewModels and also the rememberSaveable that are scoped to the parent context will preserve the state all the time, whereas those that are scoped to each NavBackStackEntry will preserve state only for their own navigation destinations, which can be seen when navigating back.
Also the state saved in the MemoryOnlyViewModels will not survive process death, which you can check in the following way:

  1. Send the application to the background by pressing the Home button (but do not close it in the app switcher)
  2. Kill the process by running the following command in the IDE Terminal tab with the package name of your application
  1. adb shell am kill <package_name>
  1. Open the application again from the app switcher

If you followed the steps correctly and managed to kill and restore the process in this way, then you should notice that only MemoryOnlyViewModels have lost/reset their state.

Here is the whole demo code. Just copy and paste to a new Kotlin file and call the Demo() composable from a composable content.

英文:

You can keep the state in a MutableStateFlow in a ViewModel.

To use ViewModels in Compose you need to add the following dependency to your app/build.gradle file

  1. implementation(&quot;androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1&quot;)

Now you can use the viewModel() function to get the ViewModel instance in your composables.

With ViewModels you do not need to use rememberSaveable anymore, since the state will be kept in
the ViewModel, however, if you want the state to persist even across process death (not just configuration changes), then you have to save the state in the SavedStateHandle.

Here is an example of a ViewModel that only keeps the state in memory, but does not save it in the SavedStateHandle.

  1. class MemoryOnlyViewModel : ViewModel () {
  2.     val checkedState = MutableStateFlow(false)
  4.     fun onCheckedChange(isChecked: Boolean) = checkedState.update { isChecked }
  5. }

Here is an example of a ViewModel that saves the state in the SavedStateHandle.

  1. class SavedStateViewModel(private val state: SavedStateHandle) : ViewModel() {
  2.     val checkedState = state.getStateFlow(key = CHECKED_STATE_KEY, initialValue = false)
  4.     fun onCheckedChange(isSelected: Boolean) = state.set(key = CHECKED_STATE_KEY, value = isSelected)
  6.     companion object {
  7.         private const val CHECKED_STATE_KEY = &quot;checkedState&quot;
  8.     }
  9. }

Then the usage would look like this

  1. import androidx.compose.runtime.getValue
  2. import androidx.compose.runtime.setValue
  3.         
  4. @Composable
  5. fun CatsChip() {
  6.     val vm: SavedStateViewModel = viewModel() // or: val vm = viewModel&lt;SavedStateViewModel&gt;()
  7.     val catsChipState by vm.checkedState.collectAsState()
  9.     TextChip(
  10.         isSelected = catsChipState,
  11.         shape = Shapes(medium = RoundedCornerShape(15.dp)),
  12.         text = &quot;Cats&quot;,
  13.         selectedColor = LightGreen,
  14.         onChecked = vm::onCheckedChange, // or: onChecked = { vm.onCheckedChange(it) }
  15.     )
  16. }

For more use cases see also the Business Logic section of the Compose State Hoisting documentation

<hr>

Here is a demo Composable using Compose navigation and showcasing the two view models from above,
comparing it with rememberSaveable, scoping them in two different ways, to the parent context and to
the NavBackStackEntry. This shows how different scopes affect the lifecycle of ViewModels.

Requires the Compose navigation dependency in your app/build.gradle file

  1. implementation(&quot;androidx.navigation:navigation-compose:2.5.3&quot;)

You can check the demo by calling Demo() in some composable content of your app.
Click the buttons to navigate and see how the backstack changes. The ViewModels and also the rememberSaveable that are scoped to the parent context will preserve the state all the time, whereas those that are scoped to each NavBackStackEntry will preserve state only for their own navigation destinations, which can be seen when navigating back.
Also the state saved in the MemoryOnlyViewModels will not survive process death, which you can check in the following way:

  1. Send the application to the background by pressing the Home button (but do not close it in the app switcher)
  2. Kill the process by running the following command in the IDE Terminal tab with the package name of your application
  1. adb shell am kill &lt;package_name&gt;
  1. Open the application again from the app switcher

If you followed the steps correctly and managed to kill and restore the process in this way, then you should notice that only MemoryOnlyViewModels have lost/reset their state.

Here is the whole demo code. Just copy and paste to a new Kotlin file and call the Demo() composable from a composable content.

  1. import androidx.compose.foundation.layout.Arrangement
  2. import androidx.compose.foundation.layout.Column
  3. import androidx.compose.foundation.layout.ColumnScope
  4. import androidx.compose.foundation.layout.Row
  5. import androidx.compose.foundation.layout.padding
  6. import androidx.compose.foundation.shape.RoundedCornerShape
  7. import androidx.compose.material.icons.Icons
  8. import androidx.compose.material.icons.filled.AddCircle
  9. import androidx.compose.material.icons.filled.Clear
  10. import androidx.compose.material3.Button
  11. import androidx.compose.material3.Icon
  12. import androidx.compose.material3.Surface
  13. import androidx.compose.material3.Text
  14. import androidx.compose.runtime.Composable
  15. import androidx.compose.runtime.collectAsState
  16. import androidx.compose.runtime.getValue
  17. import androidx.compose.runtime.mutableStateOf
  18. import androidx.compose.runtime.remember
  19. import androidx.compose.runtime.saveable.rememberSaveable
  20. import androidx.compose.runtime.setValue
  21. import androidx.compose.ui.Alignment
  22. import androidx.compose.ui.Modifier
  23. import androidx.compose.ui.graphics.Color
  24. import androidx.compose.ui.unit.dp
  25. import androidx.lifecycle.SavedStateHandle
  26. import androidx.lifecycle.ViewModel
  27. import androidx.lifecycle.viewmodel.compose.viewModel
  28. import androidx.navigation.compose.NavHost
  29. import androidx.navigation.compose.composable
  30. import androidx.navigation.compose.currentBackStackEntryAsState
  31. import androidx.navigation.compose.rememberNavController
  32. import kotlinx.coroutines.flow.MutableStateFlow
  33. import kotlinx.coroutines.flow.update
  35. class MemoryOnlyViewModel : ViewModel () {
  36.     val checkedState = MutableStateFlow(false)
  38.     fun onCheckedChange(isChecked: Boolean) = checkedState.update { isChecked }
  39. }
  41. class SavedStateViewModel(private val state: SavedStateHandle) : ViewModel() {
  42.     val checkedState = state.getStateFlow(key = CHECKED_STATE_KEY, initialValue = false)
  44.     fun onCheckedChange(isSelected: Boolean) = state.set(key = CHECKED_STATE_KEY, value = isSelected)
  46.     companion object {
  47.         private const val CHECKED_STATE_KEY = &quot;checkedState&quot;
  48.     }
  49. }
  50.     
  51. @Composable
  52. fun Demo() {    
  53.     @Composable
  54.     fun SimpleChip(
  55.         text: String,
  56.         isSelected: Boolean,
  57.         onChecked: (Boolean) -&gt; Unit,
  58.     ) {
  59.         Surface(
  60.             onClick = { onChecked(!isSelected) },
  61.             modifier = Modifier.padding(4.dp),
  62.             shape = RoundedCornerShape(16.dp),
  63.             color = if (isSelected) Color(0xFF7986CB) else Color.LightGray,
  64.         ) {
  65.             Row(
  66.                 modifier = Modifier.padding(8.dp),
  67.                 horizontalArrangement = Arrangement.spacedBy(4.dp),
  68.                 verticalAlignment = Alignment.CenterVertically,
  69.             ) {
  70.                 Text(text)
  71.                 Icon(
  72.                     imageVector = if (isSelected) Icons.Default.Clear else Icons.Default.AddCircle,
  73.                     contentDescription = null,
  74.                 )
  75.             }
  76.         }
  77.     }
  79.     // These VMs are scoped to the lifecycle of the parent context (likely a ComponentActivity)
  80.     val parentMemoryOnlyVm: MemoryOnlyViewModel = viewModel()
  81.     val parentSavedStateVm: SavedStateViewModel = viewModel()
  82.     var parentSaveable by rememberSaveable { mutableStateOf(false) }
  84.     @Composable
  85.     @Suppress(&quot;UnusedReceiverParameter&quot;)
  86.     fun ColumnScope.DemoScreen(text: String) {
  87.         Text(text)
  89.         val parentMemoryOnlyState by parentMemoryOnlyVm.checkedState.collectAsState()
  91.         SimpleChip(text = &quot;MemoryOnly VM (parent scoped)&quot;,
  92.             isSelected = parentMemoryOnlyState, onChecked = parentMemoryOnlyVm::onCheckedChange)
  94.         val navMemoryOnlyVm: MemoryOnlyViewModel = viewModel()
  95.         val navMemoryOnlyState by navMemoryOnlyVm.checkedState.collectAsState()
  97.         SimpleChip(text = &quot;MemoryOnly VM (nav scoped)&quot;,
  98.             isSelected = navMemoryOnlyState, onChecked = navMemoryOnlyVm::onCheckedChange)
  101.         val parentSavedState by parentSavedStateVm.checkedState.collectAsState()
  103.         SimpleChip(text = &quot;SavedState VM (parent scoped)&quot;,
  104.             isSelected = parentSavedState, onChecked = parentSavedStateVm::onCheckedChange)
  106.         val navSavedStateVm: SavedStateViewModel = viewModel()
  107.         val navSavedState by navSavedStateVm.checkedState.collectAsState()
  109.         SimpleChip(text = &quot;SavedState VM (nav scoped)&quot;,
  110.             isSelected = navSavedState, onChecked = navSavedStateVm::onCheckedChange)
  113.         SimpleChip(text = &quot;rememberSaveable (parent scoped)&quot;,
  114.             isSelected = parentSaveable, onChecked = { parentSaveable = it })
  116.         var navSaveable by rememberSaveable { mutableStateOf(false) }
  118.         SimpleChip(text = &quot;rememberSaveable (nav scoped)&quot;,
  119.             isSelected = navSaveable, onChecked = { navSaveable = it })
  120.     }
  122.     val navController = rememberNavController()
  124.     @Composable
  125.     fun BackButton() = Button(onClick = { navController.navigateUp() }) {
  126.         Text(&quot;Go back&quot;)
  127.     }
  129.     @Composable
  130.     fun NavButton(route: String) = Button(onClick = { navController.navigate(route) }) {
  131.         Text(&quot;Navigate to $route&quot;)
  132.     }
  134.     Column {
  135.         val currentEntry by navController.currentBackStackEntryAsState()
  136.         val backStack = remember(currentEntry) {
  137.             navController.backQueue
  138.                 .mapNotNull { it.destination.route }
  139.                 .joinToString(&quot; &gt; &quot;)
  140.         }
  141.         Text(text = &quot;Backstack: $backStack&quot;)
  143.         NavHost(navController = navController, startDestination = &quot;start&quot;) {
  144.             composable(&quot;start&quot;) {
  145.                 Row { NavButton(route = &quot;A&quot;); NavButton(route = &quot;B&quot;) }
  146.             }
  147.             composable(&quot;A&quot;) {
  148.                 Column {
  149.                     Row { BackButton(); NavButton(route = &quot;B&quot;) }
  150.                     DemoScreen(&quot;Screen A&quot;)
  151.                 }
  152.             }
  153.             composable(&quot;B&quot;) {
  154.                 Column {
  155.                     Row { BackButton(); NavButton(route = &quot;A&quot;) }
  156.                     DemoScreen(&quot;Screen B&quot;)
  157.                 }
  158.             }
  159.         }
  160.     }
  161. }

huangapple
  • 本文由 发表于 2023年4月19日 17:05:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76052665.html
  • android
  • android-chips
  • android-jetpack-compose
  • kotlin
  • state
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定