我怎样才能像这样的 Facebook 帖子一样显示专辑图片？

Posted 2023-02-23

【中文标题】我怎样才能像这样的 Facebook 帖子一样显示专辑图片？

【英文标题】：How can i show Album images Like Facebook post like this?

【发布时间】：2020-06-27 16:49:14

【问题描述】：

根据用户上传的内容，我从 API 链接获取单个图像或多个图像链接。所以我想创建一个负责任的小部件。要根据 API 数据更改哪个。如果我得到超过 4 张图像，我想显示这样的计数。我的意思是在图像上。请看下面的图片标记

【参考方案1】：

您可能应该创建一个小部件来处理所有这些。这是一个小例子。 这个小部件获取图像 URL 并将它们放在一个网格中，当图像数量超过 maxImages 时，它会执行 facebook 的操作。

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

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

下面是一个小例子：

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

飞镖垫的结果： 忽略我使用相同图像的事实。当您单击图像时，也会调用相应的函数。

【讨论】：

首先谢谢你，伙计，我试过这个答案，但图像不可见，i.stack.imgur.com/arMkA.png

尝试将网络图像更改为任何资产图像。检查您的模拟器是否可以访问互联网。有时，我在模拟器上遇到类似的互联网问题，通常通过重新启动来解决。告诉我它是否有效。

是的，我已经更改了网络映像 (picsum.photos/250?image=9)，并且我的模拟器 Internet 运行良好，因为我从服务器检索 API 数据

谢谢，伙计，工作正常，加载需要时间，如果您喜欢我的问题，请投票。

我在Listview.builder() 中使用了这个PhotoGrid，我遇到了一个问题1。我无法滚动PhotoGrid 小部件，然后用户点击一张图片