从服务器获取图像到 gridview 中

Question

我试过了，但无法理解文档。

我想从服务器加载图像并将它们加载到网格视图中。服务器一次发送 10 张图像。当 gridview 滚动到底部时，它应该发送下 10 个项目的请求。当用户单击特定照片时，它将在另一个带有额外详细信息的小部件中打开。性能是一个主要问题。

我不是要代码。我只想要确切的方向。它将帮助建立 Flutter 社区。

Answer 1

可能我对以下问题的回答 link 会有所帮助。在您的情况下，只需将其更改为 GridView 而不是 ListView.

view

Answer 2

我在使用 Flutter 构建 Instagram clone 时实现了这一点。如果您熟悉 Instagram，个人资料页面有一个图像网格，这些图像是用户的 post。然后您可以单击图像，它会将图像打开到一个 'fullscreen' 小部件中，您可以在其中执行其他操作（如评论和喜欢）。

如果对代码感兴趣，可以查看一下here。函数 buildUserPosts 是创建网格的地方。

Answer 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 中

Fetch Images from server into gridview in flutter

api

gridview

flutter