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

Question

我想创建一个像 instagram 搜索 page/profilepage 这样的图像网格，图像以 3 行排列，并希望网格根据我 collection 中的图像数量填满。

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

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

而且因为我希望能够使用 onpressed 来查看整张照片，也许环绕不是我应该使用的功能？

这是我的代码的副本：

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]);
      },
    );
  }
}

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

Answer 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,
      ),
    );
  }),
)

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

Flutter image grid from firebase (instagram style)

gridview

instagram

firebase

flutter