Fabio De Cena
Fabio De Cena

Reputation: 1

How refers to only one element of a LazyColumn using ViewModel and UiState

I started recently a course on jetpack Compose and I was suddenly enthusiast about it. Now I learned how to use Viewmodel and UiState to manage different data states.

Very interesting and exciting for me but however I found something not clear. I tried to change the Architecture approach of another App, in order to execute some extra exercise, but I can't find a solution to this:   I want to manage isExpanded state of the Dog cards directly from the UiState class. When I tried to do this I always obtain that all the dog's cards are expanded together and not only one when an onClick function is executed. I found a solution inserting a variable expanded in the MainActivity but this is not what I want to reach. Here my code and I hope I was clear enough to explain my problem.

data class DogUiState(
 //I would like to manage the expanded state     
  //of dog's cards with a variable here like 
 //val isExpanded: Boolean = false
val expandedDogName: Int = 0,
val dogsList: List<Dog> = emptyList()
)


class DogViewModel: ViewModel() {
    private val _dogUiState =      MutableStateFlow(DogUiState())
   val dogUiState: StateFlow<DogUiState> =       _dogUiState.asStateFlow()

fun updateDogList(): List<Dog> {
    _dogUiState.value =      DogUiState(dogsList = dogs)
    return _dogUiState.value.dogsList
}
fun toggleExpanded(dogName: Int) {
    _dogUiState.update { currentUiState ->
        val newExpandedDog =    currentUiState.expandedDogName != dogName
        currentUiState.copy(
            expandedDogName = if    (newExpandedDog) dogName else 0,
        )
    }
  }
 }

@Composable
  fun DogItem(
 dog: Dog,
 modifier: Modifier = Modifier,
 viewModel: DogViewModel,
 uiState: DogUiState
 ) {
 //this is the variable thanks to I can   
 //expand only one card at time
 val expanded = uiState.expandedDogName ==    dog.name

   Card(
      modifier = modifier
   ) {
      Column(
          modifier = Modifier
              .animateContentSize(
                animationSpec = spring(
                    dampingRatio =     Spring.DampingRatioNoBouncy,
                    stiffness =     Spring.StiffnessMedium
                )
            )
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
               .padding(dimensionResource(R.dimen.padding_small))
        ) {
            DogIcon(dog.imageResourceId)
            DogInformation(dog.name, dog.age)
            Spacer(Modifier.weight(1f))
            DogItemButton(
                expanded = expanded,
                onClick = { viewModel.toggleExpanded(dog.name) },
            )
        }
        if (expanded) {
            DogHobby(
                dog.hobbies, modifier = Modifier.padding(
                    start = dimensionResource(R.dimen.padding_medium),
                    top = dimensionResource(R.dimen.padding_small),
                    bottom = dimensionResource(R.dimen.padding_medium),
                    end = dimensionResource(R.dimen.padding_medium)
                )
            )
        }
    }
  }
}

  Thanks for your attention

Upvotes: 0

Views: 44

Answers (0)

Related Questions