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

Question

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

我在整个小部件树中查看了我所有的 alignment、填充和边距，但我不相信是这样。 另外，我做了一个新的测试 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"),
                  ],
                )),

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

Answer 1

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

  padding: EdgeInsets.zero,

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

Answer 2

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

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

Answer 3

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

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