在这个演示应用程序中,我使用Jetpack Compose实现了Pageing3,但在ListContent中,我在将所有依赖项更新到最新版本后收到了这个错误,我try 将项和键传递为unsplashImage.id
它看起来较新版本中的lazyColumn有不同的参数
这是我的ListContent文件
@ExperimentalCoilApi
@Composable
fun ListContent(items: LazyPagingItems<UnsplashImage>) {
Log.d("Error", items.loadState.toString())
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(all = 12.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(
items = items,
key = { unsplashImage ->
unsplashImage.id
}
) { unsplashImage ->
unsplashImage?.let { UnsplashItem(unsplashImage = it) }
}
}
}
@ExperimentalCoilApi
@Composable
fun UnsplashItem(unsplashImage: UnsplashImage) {
val painter = rememberAsyncImagePainter(
model = unsplashImage.urls.regular,
error = painterResource(id = R.drawable.ic_placeholder),
placeholder = painterResource(id = R.drawable.ic_placeholder)
)
val context = LocalContext.current
Box(
modifier = Modifier
.clickable {
val browserIntent = Intent(
Intent.ACTION_VIEW,
Uri.parse("https://unsplash.com/@${unsplashImage.user.username}?utm_source=DemoApp&utm_medium=referral")
)
ContextCompat.startActivity(context, browserIntent, null)
}
.height(300.dp)
.fillMaxWidth(),
contentAlignment = Alignment.BottomCenter
) {
Image(
modifier = Modifier.fillMaxSize(),
painter = painter,
contentDescription = "Unsplash Image",
contentScale = ContentScale.Crop
)
Surface(
modifier = Modifier
.height(40.dp)
.fillMaxWidth()
.alpha(0.5F),
color = Color.Black
) {}
Row(
modifier = Modifier
.height(40.dp)
.fillMaxWidth()
.padding(horizontal = 6.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = buildAnnotatedString {
append("Photo by ")
withStyle(style = SpanStyle(fontWeight = FontWeight.Black)) {
append(unsplashImage.user.username)
}
append(" on Unsplash")
},
color = Color.White,
fontSize = MaterialTheme.typography.titleSmall.fontSize,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
LikeCounter(
modifier = Modifier.weight(3f),
painter = painterResource(id = R.drawable.ic_heart),
likes = "${unsplashImage.likes}"
)
}
}
}
@Composable
fun LikeCounter(
modifier: Modifier,
painter: Painter,
likes: String
) {
Row(
modifier = modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.End
) {
Icon(
painter = painter,
contentDescription = "Heart Icon",
tint = HeartRed
)
Divider(modifier = Modifier.width(6.dp))
Text(
text = likes,
color = Color.White,
fontSize = MaterialTheme.typography.titleLarge.fontSize,
fontWeight = FontWeight.Bold,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
@ExperimentalCoilApi
@Composable
@Preview
fun UnsplashImagePreview() {
UnsplashItem(
unsplashImage = UnsplashImage(
id = "1",
urls = Urls(regular = ""),
likes = 100,
user = User(username = "Midomidoman", userLinks = UserLinks(html = ""))
)
)
}
和模型
@Serializable
@Entity(tableName = UNSPLASH_IMAGE_TABLE)
data class UnsplashImage(
@PrimaryKey(autoGenerate = false)
val id: String,
@Embedded
val urls: Urls,
val likes: Int,
@Embedded
val user: User
)