Shared Elem - Baseline List

shared_elem_baseline_list.kt

@Composable
fun ListScreen(
    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),
                    contentScale = ContentScale.Crop,
                    contentDescription = null
                )
                Spacer(Modifier.size(16.dp))
                LoremIpsum(
                    modifier = Modifier.fillMaxWidth(),
                    maxLines = 3,
                )
            }
        }
    }
}