Reputation: 1
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