如何在 Flutter 中添加 ListView.builder 的填充顶部？

Posted 2023-02-23

【中文标题】如何在 Flutter 中添加 ListView.builder 的填充顶部？

【英文标题】：How to add padding top of the ListView.builder in Flutter?

【发布时间】：2019-06-19 03:23:21

【问题描述】：

我在 Flutter 项目中主要使用 ListView 和 ListView.builder。 大多数情况下，我使用构建小部件主体部分来放置 ListView 或 ListView.builder。我查看了 Flutter 文档并没有提供任何信息或示例。

这是一个基本的 ListView 示例。如您所见，ListView 放置在正文中。我想要一些身体顶部的填充物，然后是 ListView。填充结束，ListView 开始。

如何在 Flutter 中添加 ListView.builder 的 padding top？

@override
  Widget build(BuildContext context) 
    final title = 'Basic List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: // how to add some padding here then ListView
             ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  

【参考方案1】：

如果您想为随着项目上下滚动的内部内容添加填充，您只需将padding 添加到ListView 本身即可。

如果将 ListView 包装在 Padding 或 Container 中，则会在内容消失的边缘与上方的小部件之间产生间隙。

...
ListView.builder(
    padding: EdgeInsets.only(top: 10),
    itemCount: cards.length,
    itemBuilder: (context, index) 
       return MyCard(
           title: cards[index].title,
       );
    ,
)
...

【讨论】：

这是正确答案，标记的答案将使列表视图滚动到顶部的“空白”边距。使用 ListView 的 padding 只会稍微偏移内容，但滚动仍然是列表视图的顶部，我相信这是大多数人想要的。

【参考方案2】：

只需将您的 ListView 包装到 Container 小部件和 Container 小部件，它自身具有通过使用 EdgeInsets.only(top:50) // or whatever you want 设置 padding/margin 的属性

更多关于EdgeInsets click Here.的信息

【讨论】：

感谢 Govaadiyo，但我的 ListView 很长，如果我放置容器会出现溢出问题吗？

尝试按照您放置的代码进行包装。不会出现此类问题。

@Nick BTW ListView 本身具有填充属性，您也可以将其设置为顶部填充。

ListView 填充它会影响它的所有孩子，不是吗？我有一个 ListView.builder，有时它从服务器获取 300 个数据，有时它获取 500 个或更多。 Container 是否根据 ListView 项进行扩展？

这在 2020 年是错误的。它将在 ListView 的外部添加填充，而不是在容器内上下移动的内容面板。您将在 ListView 的顶部与其上方的任何内容之间有一个间隙，就好像您正在添加边距一样。只需向 ListView 本身添加填充。