如何显示像Facebook这样的相册图像? [英] How can i show Album images Like Facebook post like this?

问题描述

根据用户上传的内容，我从API链接中获取的是单张图片还是多张图片链接.因此，我想创建一个负责任的小部件.要根据API数据进行更改.如果我得到4张以上的图像，我想显示这样的计数.我的意思是图像.请参阅下面的图像标记

I'm getting single images nor multiple images link from the API link according to the user uploads. So I want to create a Responsible widget. Which want to change according to the API data. If I get more than 4 images, I want to show the count like this. I mean over the images. please see the image mark below

推荐答案

您可能应该创建一个小部件来处理所有这些.这是一个小例子. 该小部件会获取Urls图片并将其放置在网格中，并且当图片数量超过maxImages时，它将执行该Facebook工作.

You should probably create a widget to handle all that. Here is a small example. This widget takes image Urls and puts them in a grid and when the number of images exceeds maxImages, It does that facebook stuff.

根据您的要求调整小部件.

Tweak the widget according to your requirements.

import 'dart:math';

class PhotoGrid extends StatefulWidget {
      final int maxImages;
      final List<String> imageUrls;
      final Function(int) onImageClicked;
      final Function onExpandClicked;

  PhotoGrid(
      {@required this.imageUrls,
      @required this.onImageClicked,
      @required this.onExpandClicked,
      this.maxImages = 4,
      Key key})
      : super(key: key);

  @override
  createState() => _PhotoGridState();
}

class _PhotoGridState extends State<PhotoGrid> {
  @override
  Widget build(BuildContext context) {
    var images = buildImages();

    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
        crossAxisSpacing: 2,
        mainAxisSpacing: 2,
      ),
      children: images,
    );
  }

  List<Widget> buildImages() {
    int numImages = widget.imageUrls.length;
    return List<Widget>.generate(min(numImages, widget.maxImages), (index) {
      String imageUrl = widget.imageUrls[index];

      // If its the last image
      if (index == widget.maxImages - 1) {
        // Check how many more images are left
        int remaining = numImages - widget.maxImages;

        // If no more are remaining return a simple image widget
        if (remaining == 0) {
          return GestureDetector(
            child: Image.network(
              imageUrl,
              fit: BoxFit.cover,
            ),
            onTap: () => widget.onImageClicked(index),
          );
        } else {
          // Create the facebook like effect for the last image with number of remaining  images
          return GestureDetector(
            onTap: () => widget.onExpandClicked(),
            child: Stack(
              fit: StackFit.expand,
              children: [
                Image.network(imageUrl, fit: BoxFit.cover),
                Positioned.fill(
                  child: Container(
                    alignment: Alignment.center,
                    color: Colors.black54,
                    child: Text(
                      '+' + remaining.toString(),
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
              ],
            ),
          );
        }
      } else {
        return GestureDetector(
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
          onTap: () => widget.onImageClicked(index),
        );
      }
    });
  }
}

这是用法的一个小例子:

Here is a small example of usage:

var urls = <String>[
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: PhotoGrid(
            imageUrls: urls,
            onImageClicked: (i) => print('Image $i was clicked!'),
            onExpandClicked: () => print('Expand Image was clicked'),
            maxImages: 4,
          ),
        ),
      ),
    );
  }
}

在飞镖垫中产生结果: 忽略了我使用相同图像的事实.单击图像时，也会调用适当的功能.

Result in dart pad: Ignore the fact that I used the same image. When you click an image, appropriate functions are called too.

这篇关于如何显示像Facebook这样的相册图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！