Как плавно анимировать ширину кнопки при отображении/скрытии другой кнопки в Jetpack Compose? ⇐ Android

[Anonymous]

Я хочу создать анимацию, где есть кнопка, которая занимает полную ширину ряда. Когда появляется вторая кнопка (его ширина зависит от его текста), ширина первой кнопки должна быть плавно уменьшаться. Точно так же, когда вторая кнопка исчезает, ширина первой кнопки должна увеличиваться плавно. Тем не менее, анимация не работает, как ожидалось. Ширина первой кнопки не постепенно уменьшается, когда появляется вторая кнопка; Вместо этого он резко прыгает без какой -либо анимации. То же самое происходит при скрытии второй кнопки - ширина первой кнопки внезапно увеличивается. < /P>
Вот код, который я пробовал: < /p>

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

var show by remember { mutableStateOf(false) }

Column(
modifier = Modifier.fillMaxSize().padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {

Button(onClick = { show = !show}){
Text(text = "Click")
}

Spacer(modifier = Modifier.padding(32.dp))

Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
AnimatedVisibility(
visible = show,
exit = fadeOut() + slideOutHorizontally(),
enter = fadeIn() + slideInHorizontally()
) {
OutlinedButton(
onClick = {}
){
Text("Button 2")
}
}

Button(
modifier = Modifier.fillMaxWidth(),
onClick = {}
){
Text("Button 1", modifier = Modifier.animateContentSize())
}
}
}

Я ожидаю, что ширина первой кнопки должна плавно уменьшаться по мере появления второй кнопки. Точно так же оно должно плавно увеличиваться, когда вторая кнопка исчезает.
Вот что сейчас делает мой код:



Подробнее здесь: https://stackoverflow.com/questions/793 ... her-button