Flutter Firebase：如何将Storage中的多张图片以画廊形式展示？

我写了一个listImages函数，能从Firebase Storage的/images/$childcode路径读取所有图片，但现在会为每张图片弹出一个Dialog单独展示。我希望改成在UI里以画廊形式批量展示这些图片，但尝试获取图片名称（bilderName）或URL时，没法把这些数据导出到函数外部，求解决。

我的listImages函数代码：

Future<void> listImages(String childcode) async {
  firebase_storage.ListResult result =
  await firebase_storage.FirebaseStorage.instance.ref('/images/$childcode').listAll();
  result.items.forEach((firebase_storage.Reference ref) {
    String bilderName = ref.name;
    print('Files: $ref');
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text(
          "Images",
        ),
        content: Row(
          children: [
            Container(
              height: 200,
              width: 200,
              child: ImageViewer(childcode: childcode, fileName: bilderName),
            ),
          ],
        ),
        actions: [
          // Cancel Button
          TextButton(
            child: const Text("Close",
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () => Navigator.pop(context),
          ),
        ],
      ),
    );
  });
}

我的ImageViewer组件代码：

FutureBuilder(
        future: storage.downloadURL('$childcode/$fileName'),
        builder: (BuildContext context,
            AsyncSnapshot<String> snapshot) {
          if (snapshot.connectionState == ConnectionState.done &&
              snapshot.hasData){

            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 100,
                height: 100,
                child: Image.network(
                  snapshot.data!,
                  fit: BoxFit.cover,
                ),
              ),
            );

          }
          if (snapshot.connectionState == ConnectionState.waiting || !snapshot.hasData) {
            return CircularProgressIndicator();
          }
          return Container();
        }
    ),

核心思路是把图片数据存储到组件的状态中，通过状态更新触发UI渲染，用GridView或ListView构建画廊布局。

步骤1：在State类中定义状态变量 #

假设你的组件是StatefulWidget，在对应的State类里添加存储图片名称（或URL）的列表：

// 存储图片名称，也可以换成存储URL优化性能
List<String> _imageNames = [];

步骤2：修改listImages函数，收集图片数据并更新状态 #

把原来的弹窗逻辑改成收集图片数据，调用setState更新UI：

Future<void> listImages(String childcode) async {
  firebase_storage.ListResult result =
      await firebase_storage.FirebaseStorage.instance.ref('/images/$childcode').listAll();
  
  // 清空旧数据，避免重复加载
  setState(() {
    _imageNames.clear();
  });

  // 遍历所有图片引用，收集名称到状态列表
  for (var ref in result.items) {
    setState(() {
      _imageNames.add(ref.name);
    });
  }
}

步骤3：构建画廊UI #

在build方法中添加GridView来批量展示图片，复用你已有的ImageViewer组件：

// 画廊展示区域
GridView.builder(
  padding: const EdgeInsets.all(8),
  // 配置网格布局：每行2张图，设置间距
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  // 图片数量
  itemCount: _imageNames.length,
  // 构建每个图片项
  itemBuilder: (context, index) {
    return ImageViewer(
      childcode: childcode,
      fileName: _imageNames[index],
    );
  },
)

可选优化：预加载图片URL #

如果觉得每个ImageViewer单独请求URL效率低，可以提前批量获取所有图片的下载URL，直接在画廊中使用：

修改状态变量和listImages函数：

List<String> _imageUrls = [];

Future<void> listImages(String childcode) async {
  firebase_storage.ListResult result =
      await firebase_storage.FirebaseStorage.instance.ref('/images/$childcode').listAll();
  
  List<String> urls = [];
  // 批量获取所有图片的下载URL
  for (var ref in result.items) {
    String url = await ref.getDownloadURL();
    urls.add(url);
  }

  setState(() {
    _imageUrls = urls;
  });
}

直接构建画廊（无需ImageViewer）：

GridView.builder(
  padding: const EdgeInsets.all(8),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  itemCount: _imageUrls.length,
  itemBuilder: (context, index) {
    return Container(
      width: 100,
      height: 100,
      child: Image.network(
        _imageUrls[index],
        fit: BoxFit.cover,
        // 加载中显示进度条
        loadingBuilder: (context, child, loadingProgress) {
          if (loadingProgress == null) return child;
          return const CircularProgressIndicator();
        },
      ),
    );
  },
)

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