Question

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

这是一个基本的ListView示例。如您所见，ListView放置在主体中。我想要在主体顶部填充一些内容，然后再添加ListView。填充结束，ListView开始。

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

@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'),
            ),
          ],
        ),
      ),
    );
  }

Answer 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,
       );
    },
)
...

Answer 2

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

有关EdgeInsets click Here.

的更多信息

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

2 个答案: