升级依赖后Jetpack Compose中Paging3 LazyColumn参数报错问题

问题原因 #

升级Jetpack Compose与Paging3到最新版本后，LazyPagingItems对应的items扩展函数API发生变更：key选择器的参数变为可空类型（UnsplashImage?），原代码直接访问unsplashImage.id会因空值触发编译或运行时错误。

解决方案 #

1. 修复key选择器的空值处理 #

修改ListContent中items的key参数，处理item为空的情况：

@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 ->
                // 优先使用item的id作为key，为空时生成唯一临时key保证稳定性
                unsplashImage?.id ?: rememberSaveable { UUID.randomUUID().toString() }
            }
        ) { unsplashImage ->
            unsplashImage?.let { UnsplashItem(unsplashImage = it) }
        }
    }
}

如果确认分页过程中不会出现空item（例如关闭了占位符功能），也可以使用非空断言简化，但不推荐在通用场景使用：

key = { unsplashImage ->
    checkNotNull(unsplashImage).id
}

2. 适配Coil最新API（可选） #

如果使用的是Coil 2.x及以上版本，rememberAsyncImagePainter已被标记为过时，建议替换为官方推荐的AsyncImage组件，简化图片加载逻辑：

@ExperimentalCoilApi
@Composable
fun UnsplashItem(unsplashImage: UnsplashImage) {
    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
    ) {
        // 替换原手动创建painter的逻辑
        AsyncImage(
            model = unsplashImage.urls.regular,
            placeholder = painterResource(id = R.drawable.ic_placeholder),
            error = painterResource(id = R.drawable.ic_placeholder),
            contentDescription = "Unsplash Image",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        // 其余代码保持不变...
    }
}

内容的提问来源于stack exchange，提问作者Dr Mido