Nthily
04/14/2021, 4:11 PMval normalModifier = 0.dp
val expandModifier = 700.dp
val animatedHeight by animateDpAsState(
targetValue = (if(viewModel.textListSwitch) expandModifier else normalModifier),
animationSpec = tween(500)
)
I wrote a height animation of the expanded content, but I found that the Text control inside can be hidden in this way, while the Switch control is still displayedDoris Liu
04/14/2021, 8:02 PMSwitch
and maybe a video clip of what the animation looks like now. 🙂Nthily
04/15/2021, 12:35 PMNthily
04/15/2021, 12:37 PMNthily
04/15/2021, 12:37 PMNthily
04/15/2021, 12:56 PMNthily
04/15/2021, 1:32 PMColumn(
modifier = Modifier
.padding(8.dp)
.height(animatedHeight)
.verticalScroll(rememberScrollState())
)
what, I also found that if I added .verticalScroll, it also became normalDoris Liu
04/15/2021, 6:34 PMrequiredSize
defined: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]124?q=switch.kt&ss=androidx%2Fplatform%2Fframeworks%2Fsupport
As a result, when the parent doesn't have enough space (e.g. 0 height) to accommodate the Switch, it will be centered in the parent. Since the parent doesn't clip, you end up seeing the whole switch. Here is an example of the requiredSize
modifier if you are curious.Nthily
04/15/2021, 6:44 PMDoris Liu
04/15/2021, 6:44 PMModifier.animateContentSize
or AnimatedVisibility
You could add Modifier.animateContentSize
to your column:
Column(Modifier.animateContentSize()) {
if(viewModel.textListSwitch) // Show the content only when condition is met
}
Or put the Column in an AnimatedVisibility
:
AnimatedVisibility(visible = viewModel.textListSwitch) { Column(..) {...} }
Nthily
04/15/2021, 6:45 PMNthily
04/15/2021, 6:46 PMDoris Liu
04/15/2021, 6:47 PMNthily
04/15/2021, 6:48 PM