Shared Elem - Animated List

shared_elem_animated_list.kt

@Composable
// 1
fun SharedTransitionScope.ListScreen(
    // 2
    animatedVisibilityScope: AnimatedVisibilityScope,
    onItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(all = 16.dp),
    ) {
        items(50) { item ->
            val width = 340 + item * 20
            val height = width * 4 / 3
            val url = "https://loremflickr.com/$width/$height"
            Row(
                modifier = Modifier
                    .clickable(
                        interactionSource = remember { MutableInteractionSource() },
                        indication = null
                    ) {
                        onItemClick(url)
                    }
                    .fillMaxWidth(),
            ) {
                AsyncImage(
                    model = url,
                    modifier = Modifier
                        .size(100.dp)
                        // 3
                        .sharedElement(
                            state = rememberSharedContentState(
                                key = "image-$url"
                            ),
                            animatedVisibilityScope = animatedVisibilityScope,
                        ),
                    contentScale = ContentScale.Crop,
                    contentDescription = null
                )
                Spacer(Modifier.size(16.dp))
                LoremIpsum(
                    modifier = Modifier.fillMaxWidth(),
                    maxLines = 3,
                )
            }
        }
    }
}