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

[Anonymous]

Я хочу создать анимацию, в которой кнопка будет занимать всю ширину строки. При появлении второй кнопки (ее ширина зависит от текста) ширина первой кнопки должна плавно уменьшаться. Аналогично, когда вторая кнопка исчезает, ширина первой должна плавно увеличиваться.
Я попытался реализовать этот эффект с помощью AnimatedVisibility. Однако анимация работает не так, как ожидалось. Ширина первой кнопки не уменьшается постепенно при появлении второй кнопки; вместо этого он резко подпрыгивает без какой-либо анимации. То же самое происходит и при скрытии второй кнопки — ширина первой кнопки внезапно увеличивается.
Вот код, который я пробовал:

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

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