如何解决Firebase的抖动图像网格Instagram风格
我想创建一个像instagram搜索页/个人资料页这样的图像网格,并在每行3行中添加图像,并希望该网格根据我收藏的图像数量来填充。
当我按下图像时,我想加载该照片,以便将其保存到手机中。我尝试使用自动换行功能,但没有得到每张照片的列表,而是每张照片得到152套,因此列表很大。
有人知道我做错了什么吗?
由于我希望能够使用onpress查看整个照片,所以包装不是我应该使用的功能吗?
这是我的代码的副本:
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]);
},);
}
}
-------------------------------------------------------------
解决方法
有一个名为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,),);
}),)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。