Flutter Firestore：如何从Firestore Storage获取图片填充GridView？

一、先搞定基础配置 #

• 确认项目已集成Firebase Storage与图片加载库依赖（以Android为例，在build.gradle中添加）：

implementation 'com.google.firebase:firebase-storage-ktx:20.3.0'
// 用Glide做图片加载，也可以替换成Coil
implementation 'com.github.bumptech.glide:glide:4.16.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'

• 检查Storage安全规则，开发阶段可临时放开（上线务必改回严格权限）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null; // 开发测试时可临时用if true; 注意风险
    }
  }
}

二、获取图片下载URL #

有两种实用方式：

方式1：提前把URL存在Firestore文档（推荐）

把图片上传到Storage后，将生成的下载URL存入Firestore集合，加载时直接读取：

val db = Firebase.firestore
db.collection("images").get()
    .addOnSuccessListener { result ->
        val imageUrls = mutableListOf<String>()
        result.forEach { doc ->
            doc.getString("imageUrl")?.let { imageUrls.add(it) }
        }
        // 拿到URL列表后给GridView设置适配器
        setupGridView(imageUrls)
    }
    .addOnFailureListener {
        // 处理查询失败逻辑
    }

方式2：直接遍历Storage文件夹

如果没提前存URL，可直接遍历指定文件夹获取所有图片的下载URL：

val storageRef = Firebase.storage.reference.child("your-image-folder") // 替换成你的文件夹路径
storageRef.listAll()
    .addOnSuccessListener { listResult ->
        val imageUrls = mutableListOf<String>()
        listResult.items.forEachIndexed { index, item ->
            item.downloadUrl.addOnSuccessListener { uri ->
                imageUrls.add(uri.toString())
                // 所有URL获取完成后初始化GridView
                if (imageUrls.size == listResult.items.size) {
                    setupGridView(imageUrls)
                }
            }
        }
    }
    .addOnFailureListener {
        // 处理遍历失败逻辑
    }

三、用GridView加载图片 #

先写一个简单的自定义适配器：

class ImageGridAdapter(private val context: Context, private val imageUrls: List<String>) : BaseAdapter() {
    override fun getCount(): Int = imageUrls.size

    override fun getItem(position: Int): Any = imageUrls[position]

    override fun getItemId(position: Int): Long = position.toLong()

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val imageView = convertView as? ImageView ?: ImageView(context).apply {
            layoutParams = AbsListView.LayoutParams(200, 200) // 设置图片尺寸
            scaleType = ImageView.ScaleType.CENTER_CROP
        }
        // 用Glide加载图片
        Glide.with(context)
            .load(imageUrls[position])
            .placeholder(R.drawable.placeholder) // 占位图
            .error(R.drawable.error) // 错误图
            .into(imageView)
        return imageView
    }
}

然后在Activity/Fragment中初始化GridView：

private fun setupGridView(imageUrls: List<String>) {
    val gridView = findViewById<GridView>(R.id.gridView)
    gridView.adapter = ImageGridAdapter(this, imageUrls)
    gridView.numColumns = 3 // 设置列数
}

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