如何在Android Jetpack Compose的LazyColumn中加载Firebase Storage图片

步骤1：添加所需依赖 #

在模块级build.gradle.kts中添加图片加载库及Firebase集成组件，版本可替换为当前最新稳定版：

implementation("io.coil-kt:coil-compose:2.5.0")
implementation("io.coil-kt:coil-firebase-storage:2.5.0")

步骤2：定义数据结构 #

调整Firestore对应的实体类，新增存储头像在Firebase Storage中的路径字段：

data class User(
    val name: String = "",
    val avatarStoragePath: String = "" // 示例值："avatars/uid_xxx.jpg"
)

步骤3：调整ViewModel逻辑 #

原有加载Firestore数据的逻辑无需大幅修改，仅需确保查询时能拿到完整的avatarStoragePath字段即可：

class UserViewModel : ViewModel() {
    private val firestore = FirebaseFirestore.getInstance()
    val usersFlow = flow {
        val userList = firestore.collection("users")
            .get()
            .await()
            .toObjects(User::class.java)
        emit(userList)
    }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList())
}

步骤4：实现列表项UI #

借助Coil的AsyncImage组件直接加载Firebase Storage引用，库会自动处理下载、缓存、错误降级等逻辑：

@Composable
fun UserListItem(user: User) {
    val storageRef = FirebaseStorage.getInstance().getReference(user.avatarStoragePath)
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = storageRef,
            contentDescription = "用户头像",
            modifier = Modifier
                .size(48.dp)
                .clip(CircleShape),
            placeholder = painterResource(R.drawable.default_avatar), // 加载中占位图
            error = painterResource(R.drawable.default_avatar) // 加载失败占位图
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(
            text = user.name,
            fontSize = 16.sp,
            fontWeight = FontWeight.Medium
        )
    }
}

步骤5：接入LazyColumn #

在主界面的LazyColumn中直接遍历渲染即可：

@Composable
fun MainScreen(viewModel: UserViewModel = viewModel()) {
    val userList by viewModel.usersFlow.collectAsStateWithLifecycle()
    LazyColumn {
        items(userList, key = { it.avatarStoragePath }) { user ->
            UserListItem(user = user)
        }
    }
}

注意事项 #

• 提前配置Firebase Storage的读写权限，公开访问的头像可将对应路径权限设置为允许未认证读取
• Coil默认自带内存、磁盘两级缓存，同路径图片不会重复发起Storage请求，无需额外实现缓存逻辑
• 如需圆角、模糊等图片变换效果，可直接在AsyncImage参数中添加transformations配置实现

内容的提问来源于stack exchange，提问作者Chandresh Parmar