使用Paging3获取Unsplash图片无法在LazyColumn中显示的问题求助
Paging3获取Unsplash图片无法在LazyColumn中显示的问题求助
大家好,我正在跟着线上课程做一个从Unsplash获取图片并在LazyColumn中展示的项目,已经严格按照Unsplash官方文档完成了配置,但现在遇到了一个棘手的问题——LazyColumn里的图片和相关数据完全不显示,界面上只有顶部的AppBar和背景能看到。
我把相关代码贴在下面,希望大家能帮忙排查一下问题所在:
app模块build.gradle(读取API_KEY)
val properties = Properties() try { properties.load(FileInputStream(rootProject.file("gradle.properties"))) } catch (e: Exception) { logger.warn("Properties not Found!") } android { defaultConfig { // ...其他默认配置 buildConfigField("String", "API_KEY", "" + properties["API_KEY"]) } }
UnsplashApi.kt(接口定义)
interface UnsplashApi { @Headers("Authorization: Client-ID ${BuildConfig.API_KEY}") @GET("/photos") suspend fun getAllImages( @Query("page") page: Int, @Query("per_page") perPage: Int ): List<UnsplashImage> @Headers("Authorization: Client-ID ${BuildConfig.API_KEY}") @GET("/search/photos") suspend fun searchImages( @Query("query") query: String, @Query("per_page") perPage: Int ): List<UnsplashImage> }
ListContent.kt(列表展示Composable)
@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(count = items.itemCount, key = items.itemKey { unsplashImage -> unsplashImage.id } ) { index -> items[index]?.let { UnsplashItem(unsplashImage = it) } } } } @ExperimentalCoilApi @Composable fun UnsplashItem(unsplashImage: UnsplashImage) { val painter = rememberAsyncImagePainter( model = ImageRequest.Builder(LocalContext.current) .data(unsplashImage.urls.regular) .crossfade(durationMillis = 1000) .error(R.drawable.ic_placeholder) .placeholder(R.drawable.ic_placeholder).build()) 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") ) 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(ContentAlpha.medium), 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 = 15.sp, maxLines = 1, overflow = TextOverflow.Ellipsis ) LikeCounter( modifier = Modifier.weight(3f), painter = painterResource(id = R.drawable.ic_heart), likes = "${unsplashImage.likes}" ) } } }
HomeScreen.kt(主界面)
@OptIn(ExperimentalCoilApi::class) @Composable fun HomeScreen(navController: NavHostController, homeViewModel: HomeViewModel = hiltViewModel() ) { val getAllImages = homeViewModel.getAllImages.collectAsLazyPagingItems() Scaffold( topBar = { HomeTopBar(onSearchClicked = { navController.navigate(Screen.Search.route) }) }, content = { Column(modifier = Modifier.padding(paddingValues = it)) {} ListContent(items = getAllImages) } ) }
麻烦各位帮忙看看问题出在哪里,谢谢大家!
备注:内容来源于stack exchange,提问作者Mahmoud Nabil
相关产品推荐
相关产品推荐

