Как плавно анимировать ширину кнопки при отображении/скрытии другой кнопки в 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())
}
}
}
< /code>
Я и ожидаю, что ширина первой кнопки должна быть плавно уменьшаться, когда появляется вторая кнопка. Точно так же он должен увеличиться плавно, когда вторая кнопка исчезает. Мой код "src =" https://i.sstatic.net/iaxq26wk.gif "/>

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