在颤动中从服务器获取图像到gridview
Posted
技术标签:
【中文标题】在颤动中从服务器获取图像到gridview【英文标题】:Fetch Images from server into gridview in flutter 【发布时间】:2019-01-13 17:15:13 【问题描述】:我已经尝试过,但无法理解文档。
我想从服务器加载图像并将它们加载到网格视图中。服务器一次发送 10 张图像。当 gridview 滚动到底部时,它应该发送下一个 10 项的请求。当用户单击特定照片时,它将在另一个带有额外详细信息的小部件中打开。性能是一个主要问题。
我不是要代码。我只想要确切的方向。它将有助于建立 Flutter 社区。
【问题讨论】:
【参考方案1】:我在使用 Flutter 构建 Instagram clone 时实现了这一点。如果您熟悉 Instagram,个人资料页面有一个图像网格,这些图像是用户的帖子。然后,您可以单击图像,它会将图像打开到“全屏”小部件中,您可以在其中执行其他操作(如评论和喜欢)。
如果您对代码感兴趣,可以查看here。函数buildUserPosts
是创建网格的地方。
【讨论】:
非常感谢您的辛勤工作...作为建议,您应该制作一个 youtube 系列。这对社区来说将是一个很好的教训 很高兴我能帮上忙。已经请求了几次 youtube 系列,但我手上的时间已经不多了。当我释放它时,它就在我的待办事项列表中。【参考方案2】:我对以下链接中问题的回答可能会有所帮助。在您的情况下,只需将其更改为 GridView
而不是 ListView
。
view
【讨论】:
【参考方案3】:[flutter_image_gallery_example][1] [https://github.com/andrea7887/flutter_image_gallery_example/blob/master/lib/main.dart][1]
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'package:flutter/foundation.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GalleryDemo(),
);
class GalleryDemo extends StatelessWidget
GalleryDemo(Key key) : super(key: key);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("Image Gallery Example"),
),
body: Center(
child: FutureBuilder<List<String>>(
future: fetchGalleryData(),
builder: (context, snapshot)
if (snapshot.hasData)
return GridView.builder(
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (context, index)
return Padding(
padding: EdgeInsets.all(5),
child: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage(
snapshot.data[index]),
fit: BoxFit.cover))));
);
return Center(child: CircularProgressIndicator());
,
),
));
Future<List<String>> fetchGalleryData() async
try
final response = await http
.get(
'https://kaleidosblog.s3-eu-west-1.amazonaws.com/flutter_gallery/data.json')
.timeout(Duration(seconds: 5));
if (response.statusCode == 200)
return compute(parseGalleryData, response.body);
else
throw Exception('Failed to load');
on SocketException catch (e)
throw Exception('Failed to load');
List<String> parseGalleryData(String responseBody)
final parsed = List<String>.from(json.decode(responseBody));
return parsed;
【讨论】:
以上是关于在颤动中从服务器获取图像到gridview的主要内容,如果未能解决你的问题,请参考以下文章