Составьте анимацию, чтобы переместить коробку через ряд ⇐ Android

[Anonymous]

У меня есть этот дизайн, за которым я пытаюсь следовать:
< /p>
Когда пользователь выбирает продолжительность, я пытаюсь использовать белую коробку (не уверен, что это лучший способ), чтобы выделить выбор. Коробка не должна перемещаться мгновенно, он должен анимировать из предыдущей позиции в новую позицию.
Это то, что у меня есть до сих пор:

Пара Проблемы: < /p>

Ящик накладывает текст, чтобы 5 минут < /code> не видно. < /li>
Я могу Не заставит анимацию работать. Когда пользователь выбирает то есть 30 минут , я должен получить позицию текста X (вверху слева от текста композиции), а затем установить целевое значение в эту позицию x . А затем установите смещение коробки в эту позицию AnimatedPstate. < /P>
Это мой код до сих пор: < /p>
var selectedIndex by remember { mutableIntStateOf(0) }

val items = listOf("5 min", "15 min", "30 min", "1 hour")

val animatedOffset by animateDpAsState(
targetValue = 0.dp, // This should be the selected text position
animationSpec = tween(durationMillis = 500),
)

Box(
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.background(
color = Color(0xff8138FF).copy(0.08f),
shape = RoundedCornerShape(12.dp),
)
.padding(4.dp),
) {
Row(
modifier = Modifier
.fillMaxSize()
.clip(RoundedCornerShape(16.dp)),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
items.forEachIndexed { index, item ->
Text(
fontWeight = FontWeight.W600,
fontSize = 16.sp,
text = item,
color = if (selectedIndex == index) Color.Black else Color.DarkGray,
modifier = Modifier
.clickable { selectedIndex = index }
.padding(horizontal = 16.dp),
)
}
}

Box(
modifier = Modifier
.width(100.dp) // Should be the same width as the text items
.height(48.dp)
.background(color = Color.White, shape = RoundedCornerShape(12.dp))
.offset(x = animatedOffset, y = 0.dp),
)
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... ross-a-row