来自 firebase 的 Flutter 图像网格（instagram 风格）答案

【问题标题】：Flutter image grid from firebase (instagram style)来自 firebase 的 Flutter 图像网格（instagram 风格）
【发布时间】：2020-08-18 16:58:13
【问题描述】：

我想创建一个图片网格，例如 instagram 搜索页面/个人资料页面，其中包含 3 行的图片，并希望根据我收藏的图片数量来填充网格。

当我按下图像时，我想加载该照片，以便您可以将该照片保存到您的手机中。我试过使用 wrap 函数，但不是每张照片都有一张列表，而是每张照片有 152 组，所以列表很大。

有人知道我做错了什么吗？

既然我希望能够使用 onpressed 来查看整张照片，也许 wrap 不是我应该使用的功能？

这是我的代码的副本：

class Imagepost {
  final String img;

  Imagepost({this.img});
}

----------------------------------------------------------------


List<Imagepost> _imageListFromSnapshot(QuerySnapshot snapshot) {
    return snapshot.documents.map((doc) {
      print(doc.data);
      return Imagepost(
        img: doc.data['img'],
      );
    }).toList();
  }

  Stream<List<Imagepost>> get img {
    return imageCollection.snapshots().map(_imageListFromSnapshot);
  }


-------------------------------------------------------------------

class ImageTile extends StatelessWidget {
  final Imagepost img;
  ImageTile({this.img});

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Wrap(
      spacing: 1,
      runSpacing: 1,
      children: List.generate(img.img.length, (index) {
        return Container(
          width: (size.width-3)/3,
          height: (size.width-3)/3,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(img.img),
              fit: BoxFit.cover),
          ),
        );
      }),
    );
  }
}

-------------------------------------------------------------------

class MediaList extends StatefulWidget {
  @override
  _MediaListState createState() => _MediaListState();
}

class _MediaListState extends State<MediaList> {
  @override
  Widget build(BuildContext context) {

    final imagepost = Provider.of<List<Imagepost>>(context) ?? [];

    return ListView.builder(
      itemCount: imagepost.length,
      itemBuilder: (context, index) {
        return ImageTile(img: imagepost[index]);
      },
    );
  }
}

-------------------------------------------------------------

【问题讨论】：

标签： firebase flutter gridview instagram

【解决方案1】：

有一个名为 GridView 的小部件非常适合。

GridView.count(
  // Create a grid with 3 columns. If you change the scrollDirection to
  // horizontal, this produces 3 rows.
  crossAxisCount: 3,
  // Generate 100 widgets that display their index in the List.
  children: List.generate(100, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline5,
      ),
    );
  }),
)

【讨论】：