Flutter：为什么我的 ListView/ListBuilder 小部件构建时在我的小部件之前有一个空白区域？答案

【问题标题】：Flutter: Why does my ListView/ ListBuilder widget build with an empty space before my widgets?Flutter：为什么我的 ListView/ListBuilder 小部件构建时在我的小部件之前有一个空白区域？
【发布时间】：2023-01-24 18:29:42
【问题描述】：

正如您在上方看到的那样，我的 ListView.builder 在列表中的实际小部件之前放置了一个边距。有什么办法可以避免这种情况吗？

我在整个小部件树中查看了我所有的对齐方式、填充和边距，但我不相信是这样。另外，我做了一个新的测试 ListView 看它是否是那个 Widget 本身的问题，我觉得是的。

这是上图的代码。

Container(
                margin: const EdgeInsets.all(60),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 5)),
                height: 20,
                width: 20,
                child: ListView(
                  children: const [
                    Text("Test"),
                    Text("Test"),
                    Text("Test"),
                  ],
                )),

如何删除或忽略此空白区域？

【问题讨论】：

如果我在 dartpad 中运行你的例子，它会给我一个不同的输出。我刚刚删除了边距以及高度和宽度属性并且它起作用了。你能给我们提供你的小部件树的代码 sn-p 吗？
你能包括第一张图片的代码吗

标签： flutter containers border flutter-listview

【解决方案1】：

尝试删除 ListView 的填充。在您的 ListView 中设置它。

  padding: EdgeInsets.zero,

默认情况下，ListView 将自动填充列表的可滚动末端，以避免 MediaQuery 的填充指示的部分障碍。要避免此行为，请使用零填充属性覆盖。

【讨论】：

【解决方案2】：

如果您正在使用卡片小部件，因为此卡片小部件在所有方面都提供 4 个保证金购买默认值，您可以通过给它明确的零保证金来消除它

Card(
   margin: EdgeInsets.zero,
   child: ///Your widget
 )

【讨论】：

【解决方案3】：

您可以尝试在 ListView 上使用 padding: EdgeInsets.zero，如果您还想缩小 ListView 的高度以匹配其内部的子项，也可以使用 shrinkWrap: true。

ListView(
    shrinkWrap: true,
    padding: EdgeInsets.zero,
    children: const [
      Text("Test"),
      Text("Test"),
      Text("Test"),
    ],
  )

【讨论】：