(Flutter) ListView 在仅包含图像的项目之间有不必要的空格

Posted 2023-02-23

【中文标题】(Flutter) ListView 在仅包含图像的项目之间有不必要的空格

【英文标题】：(Flutter) ListView has unnecessary spaces between items containing only images

【发布时间】：2021-06-02 16:52:03

【问题描述】：

我的应用需要从远程来源检索到的图像的列表视图以显示在列表中。以下图片来自randomuser.me 网站，可免费使用（测试等）

问题：

图像被正确检索并显示（这些图像是128x128，但尺寸自然会发生变化），但是图像之间存在非常大的间隙（高度/宽度尺寸已被使用，也不适合选项 - 我以前曾用它来尝试解决这个问题，但没有成功）。

建议通过设置dense: true 或删除ListView padding 和其他一些方法来使用ListTile 和各种解决方案，但是这些都不起作用。

我玩过大图像 - 它们填满了整个屏幕，我可以缩小它们，但是在缩放这些图像时，中间仍然有很大的空白空间（预期) - 在我的情况下，在 NO 缩放完成时也可以看到这些相同的差距。

MVCE

import 'package:flutter/material.dart';

void main() async 
  runApp(MaterialApp(home: MyApp()));


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    List<String> imgSrc = [
      "https://randomuser.me/api/portraits/women/84.jpg",
      "https://randomuser.me/api/portraits/men/82.jpg",
      "https://randomuser.me/api/portraits/women/11.jpg",
      "https://randomuser.me/api/portraits/women/61.jpg",
      "https://randomuser.me/api/portraits/men/1.jpg",
    ];

    Widget listview()     
      List<Widget> imgList = imgSrc.map((e) => Image.network(e)).map((e) => Image(image: e.image,)).toList();

      return ListView(
        children: imgList,
      );
    

    return Scaffold(
      body: Container(
          width: double.infinity,
          child: listview()),
    );
  

想要创建这样的东西：

我不确定是什么导致了这些空间之间的 - 建议将不胜感激！

---

更新

在玩了一会儿之后，我可以让它工作的唯一方法，如所需结果所示，它添加至少 1 个硬编码维度并使用 BoxFit.scaleDown，它将根据给定的维度进行缩放。

示例：

  List<Widget> imgList = imgSrc
      .map((e) => Image.network(e))
      .map((e) => Image(
            image: e.image,
            fit: BoxFit.scaleDown,
            height: 64,
          ))
      .toList();

【参考方案1】：

是的，您需要 fit 参数并尝试 (https://api.flutter.dev/flutter/painting/BoxFit-class.html) 中的不同选项，看看哪些对您有用。在尝试回答问题并在此处发布时，我已经对代码进行了一些清理。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  


class MyHomePage extends StatelessWidget 
  List a = [
    "https://randomuser.me/api/portraits/women/84.jpg",
      "https://randomuser.me/api/portraits/men/82.jpg",
      "https://randomuser.me/api/portraits/women/11.jpg",
      "https://randomuser.me/api/portraits/women/61.jpg",
      "https://randomuser.me/api/portraits/men/1.jpg",
  ];
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Displaying Images"),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext ctx, int index) 
          return Container(
              child: Image(
                image: NetworkImage(a[index]),
                fit: BoxFit.fill,
            
              ),

          );
        ,
        itemCount: a.length,
      ),
    );