Однако, когда количество элементов под заголовком становится большим (например, 100 + элементы), пользовательский интерфейс начинает значительно отставать во время анимации.
Есть ли лучший способ добиться такого поведения развертывания и свертывания с большей производительностью или есть ли какие-либо оптимизации, которые я могу сделать AnimatedVisibility?
Любые советы и альтернативные подходы приветствуются!
Текущая реализация:
Код: Выделить всё
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AnimatedImageWithTextItem() {
val state = remember { mutableStateMapOf() }
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
) {
val groupedItems = list.groupBy { it.date }
groupedItems.onEachIndexed { groupIndex, (key, elements) ->
val isExpanded = state[key] ?: true
stickyHeader {
Row(modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Yellow)
.clickable { state[key] = !isExpanded })
{
Text("header $key")
}
}
itemsIndexed(elements) { elementIndex, element ->
ExpandableContent(isExpanded) {
Row(modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.White)
.clickable { state[key] = !isExpanded })
{
Text("Item of the header")
}
}
}
}
}
}
const val EXPANSTION_TRANSITION_DURATION = 300
@Composable
fun ExpandableContent(
visible: Boolean = true,
content: @Composable () -> Unit
) {
val enterTransition = remember {
expandVertically(
expandFrom = Alignment.Top,
animationSpec = tween(EXPANSTION_TRANSITION_DURATION)
) + fadeIn(
initialAlpha = 0.3f,
animationSpec = tween(EXPANSTION_TRANSITION_DURATION)
)
}
val exitTransition = remember {
shrinkVertically(
// Expand from the top.
shrinkTowards = Alignment.Top,
animationSpec = tween(EXPANSTION_TRANSITION_DURATION)
) + fadeOut(
// Fade in with the initial alpha of 0.3f.
animationSpec = tween(EXPANSTION_TRANSITION_DURATION)
)
}
AnimatedVisibility(
visible = visible,
enter = enterTransition,
exit = exitTransition
) {
content()
}
}

Подробнее здесь: https://stackoverflow.com/questions/790 ... ck-compose
Мобильная версия