1. 导入必要的Compose库 implementation "androidx.compose.foundation:foundation:1.0.0-rc02" 和 implementation "androidx.compose.material:material:1.0.0-rc02"

2. 在需要使用AsyncImage的地方，引入 androidx.compose.foundation.lazy.LazyColumn，例如：

LazyColumn {
    itemsIndexed(images) { _, imageUrl ->
        AsyncImage(
            modifier = Modifier.fillMaxWidth(),
            contentScale = ContentScale.Crop,
            content = {
                CoilImage(
                    data = imageUrl,
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    fadeIn = true,
                    loading = {
                        //显示加载中
                        Box(
                            Modifier
                                .fillMaxSize()
                                .background(Color.LightGray)
                        ) {
                            CircularProgressIndicator(Modifier.align(Alignment.Center))
                        }
                    }
                )
            }
        )
    }
}

这里使用了Coil作为图片加载库。在加载图片时，AsyncImage会显示加载中的进度条。

注意：由于还处于Composable函数编写的过程中，记得使用@Preview注解提供预览效果。

@Preview(showBackground = true)
@Composable
fun PreviewAsyncImage() {
    MyTheme {
        LazyColumn {
            itemsIndexed(images) { _, imageUrl ->
                AsyncImage(
                    modifier = Modifier.fillMaxWidth(),
                    contentScale = ContentScale.Crop,
                    content = {
                        CoilImage(
                            data = imageUrl,
                            contentDescription = null,
                            contentScale = ContentScale.Crop,
                            fadeIn = true,
                            loading = {
                                //显示加载中
                                Box(
                                    Modifier
                                        .fillMaxSize()
                                        .background(Color.LightGray)
                                ) {
                                    CircularProgressIndicator(Modifier.align(Alignment.Center))
                                }
                            }
                        )
                    }
                )
            }
        }
    }
}

其中MyTheme提供了样式和颜色，可以在Theme.kt文件中定义。

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = Colors,
        typography = Typography,
        content = content