Анимация изменения размера AnimatedContent не работает плавно в диалоговом окне Jetpack Compose. ⇐ Android

[Anonymous]

Я пытаюсь анимировать изменение размера внутри диалогового окна в Jetpack Compose с помощью AnimatedContent. Цель — плавный переход между двумя разными состояниями пользовательского интерфейса, имеющими разную высоту. Однако анимация размера работает неправильно, как это видно на рисунке ниже.
Вот упрощенная версия моего кода. Элементы Box — это просто заполнители для проверки разной высоты.

Код: Выделить всё

@Composable
fun DialogWithAnimation() {

var state by remember { mutableIntStateOf(0) }

Dialog(onDismissRequest = {}) {
Surface(shape = AlertDialogDefaults.shape) {
Column {

// Header
Row(
modifier = Modifier
.height(40.dp)
.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
MyHeaderButton(
modifier = Modifier.weight(1f),
isActive = state == 0,
label = "A"
) { state = 0 }
MyHeaderButton(
modifier = Modifier.weight(1f),
isActive = state == 1,
label = "B"
) { state = 1 }
}

AnimatedContent(
targetState = state,
label = "A-B-content",
transitionSpec = {
(fadeIn(animationSpec = tween(220)) togetherWith
fadeOut(animationSpec = tween(90)))
}
) { target ->

if (target == 0) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Blue)
)
} else {
Box(
modifier = Modifier
.fillMaxWidth()
.height(150.dp)
.background(Color.Yellow)
)
}
}
}
}
}
}

Я ожидал, что содержимое диалогового окна будет плавно анимироваться при изменении его высоты.

Вот текущее поведение:



Подробнее здесь: https://stackoverflow.com/questions/796 ... compose-di