コンポーネントのサイズ変更時のアニメーションですが、Modifierのセット順でElevatedCardなどの影が表示されない罠があったので覚書き
paddingつけないと表示されないとか説明してるサイトもあったけどそんなことはない
size指定前にanimateContentSizeを指定すればok
https://developer.android.com/develop/ui/compose/animation/quick-guid
https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)
https://developer.android.com/develop/ui/compose/components/card?elevated#elevated
@Composable
fun Screen(modifier: Modifier = Modifier) {
var expanded by remember { mutableStateOf(false) }
Column(
modifier.padding(44.dp),
) {
ElevatedCard(
onClick = { expanded = !expanded },
elevation = CardDefaults.cardElevation(
defaultElevation = 8.dp
),
) {
Column(
Modifier
.animateContentSize(
spring(
stiffness = Spring.StiffnessHigh,
visibilityThreshold = IntSize.VisibilityThreshold
)
)
.fillMaxWidth()
.padding(horizontal = 12.dp, vertical = 8.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Text("ElevatedCard")
Icon(
Icons.Default.ArrowDropDown,
"",
Modifier
.then(
if (expanded) Modifier.rotate(180f)
else Modifier
)
)
}
if (expanded) Text("あ".repeat(100))
}
}
}
}
Android Studio Koala Feature Drop 2024.1.2 built on August 23, 2024