在将新图像上载到Firebase存储中时，如何制作一个填充项目的图像网格视图？

问题描述

在GridView.builder中，我们必须为itemCount属性提供一个固定值。那么，当我们通过将新图像上传到Firebase存储中来向网格视图添加新图像时，更新此属性的最佳方法是什么？在这里，我只是使用映像名称从Firebase存储中获取映像。但是我需要更改它以获取图像URL并显示图像。这是我的代码，

class ImagesScreen extends StatelessWidget {

  // building grid view 
  Widget makeImagesGrid(){
    return GridView.builder(
      itemCount: 12,//number of grid items
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,),itemBuilder: (context,index){
        return ImageGridItem(index + 1); //populating with grid items
      },);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Grid'),drawer: NavDrawer(),body: Container(
        child: makeImagesGrid(),);
  }
}

---

class ImageGridItem extends StatefulWidget {
  int _index; //each grid item index
  ImageGridItem(int index) {
    this._index = index;
  }

  @override
  _ImageGridItemState createState() => _ImageGridItemState();
}

class _ImageGridItemState extends State<ImageGridItem> {
  Uint8List imageFile; //to store image file

  //firebase storage reference
  StorageReference photosReference =
      FirebaseStorage.instance.ref().child("photos");

  //getting image from the firestore
  getImage() {
    if (!requestedIndex.contains(widget._index)) {
      //when requested index does not cotain in the list

      int MAX_SIZE = 7 * 1024 * 1024; //maximum file size for an image

      //accessing firebase storage to get the photo
      photosReference
          .child('${widget._index}.jpg')
          .getData(MAX_SIZE)
          .then((value) {
        //value is image reference
        this.setState(() {
          imageFile = value; //updating imageFile
        });
        //insert image file to the imageData map
        imageData.putIfAbsent(widget._index,() {
          return value;
        });
      }).catchError((error) {});
      //insert image file index to the requestedIndex list in the data_holder.dart
      requestedIndex.add(widget._index);
    }
  }

  //to decide whether to show the default text or actual image
  Widget decideGrideTileWidget() {
    if (imageFile == null) {
      //showing default text until it show the image
      return Center(child: Text('No Data'));
    } else {
      return Hero(
        tag: imageFile.toString(),child: Image.memory(
            //showing the actual image
            imageFile,fit: BoxFit.cover),);
    }
  }

  @override
  void initState() {
    super.initState();
    if (!imageData.containsKey(widget._index)) {
      //when imageData map does't cotains the key
      getImage();
    } else {
      //if its already contains get the image from the imageData map
      imageFile = imageData[widget._index];
    }
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Padding(
        padding: const EdgeInsets.all(3.0),child: GridTile(
          child: decideGrideTileWidget(),onTap: () {}
    );
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）