导入必要的Compose库 implementation "androidx.compose.foundation:foundation:1.0.0-rc02"
和 implementation "androidx.compose.material:material:1.0.0-rc02"
在需要使用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