Анимация AnimatedVisibility FadeIn не работает для перекомпонованных элементов, а только для элементов, входящих в компоAndroid

Форум для тех, кто программирует под Android
Ответить
Anonymous
 Анимация AnimatedVisibility FadeIn не работает для перекомпонованных элементов, а только для элементов, входящих в компо

Сообщение Anonymous »

Я фильтрую элементы на основе выбора пользователя и анимирую их обратно в FlowRow, который также находится внутри LazyColumn с уникальными ключами, однако Compose не удаляет элементы из композиции, что также мне нужно, чтобы прокрутка не прыгала, но элементы, входящие в состав предыдущего фильтра, не имеют анимации постепенного исчезновения. Другие анимации, такие как сжатие/расширение/скольжение, работают нормально.
В gif при первой фильтрации элемента 1 и второй фильтрации элемента 3 не анимируется затухание.
Изображение

Это ViewModel и фильтрация, большая часть кода опущена
class SomeViewModel : ViewModel() {

private val list = listOf(
SomeData(id = "1", value = "Row1"),
SomeData(id = "2", value = "Row2"),
SomeData(id = "3", value = "Row3"),
SomeData(id = "4", value = "Row4"),
SomeData(id = "5", value = "Row5")
)

var itemList by mutableStateOf(list)

var filter: Int = 0

fun filter() {
if (filter % 3 == 0) {
itemList = listOf(
list[0],
list[1],
list[2]
)
} else if (filter % 3 == 1) {
itemList = listOf(
list[1],
list[2]
)
} else {
itemList = listOf(
list[0],
list[2],
list[3]
)
}

filter++
}
}

data class SomeData(val id: String, val value: String)

Компонуемый объект, содержащий элементы и анимацию после того, как фильтрация вступит в силу.
@Composable
private fun StaggeredList(
filter: String,
itemList: List,
) {
BoxWithConstraints(
modifier = Modifier
) {

val itemWidth = (maxWidth - 8.dp) / 2

FlowRow(
modifier = Modifier,
maxItemsInEachRow = 2,
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
itemList.forEachIndexed { index, it ->
key(it.id) {

var visible by remember {
mutableStateOf(false)
}

LaunchedEffect(filter) {
visible = false
delay(2000)
visible = true
}

AnimatedVisibility(
visible = visible,
enter = fadeIn(tween(2000)),
exit = fadeOut(tween(2000))
) {
MyRow(
modifier = Modifier.size(itemWidth, 200.dp),
item = it
)
}
}
}
}
}
}

Остальная часть кода для воспроизведения проблемы
@Preview
@Composable
private fun FlowRowCompositionPreview() {
val viewModel = viewModel()
MyComposable(viewModel)
}

@Composable
fun MyComposable(someViewModel: SomeViewModel) {

Column(modifier = Modifier.fillMaxSize().background(backgroundColor)) {

val itemList = someViewModel.itemList

LazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = PaddingValues(16.dp)
) {

items(5) {
Box(
modifier = Modifier
.background(Color.Red, RoundedCornerShape(16.dp))
.fillMaxWidth().height(100.dp)
)
}

item {
Button(
modifier = Modifier.padding(16.dp).fillMaxWidth(),
onClick = {
someViewModel.filter()
}
) {
Text("Filter")
}
}
item {
StaggeredList(
filter = someViewModel.filter.toString(),
itemList = itemList
)
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... but-only-f
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Android»