Flutter：如何为ListView.separated的首个列表项与AppBar之间添加间距

这个问题很常见，我给你提供几种简单有效的解决方案，你可以根据自己的需求选择：

方法一：给ListView添加顶部内边距（最直接） #

直接给ListView.separated设置padding属性，指定顶部的间距值，这样整个列表的上方就会留出空隙，和AppBar隔开。

修改后的代码如下：

ListView.separated(
  // 添加顶部内边距，数值可以根据需求调整
  padding: const EdgeInsets.only(top: 16.0),
  itemCount: 2,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Color.fromARGB(100, 141, 166, 255),
          width: 0.5
        ),
        borderRadius: BorderRadius.circular(10)
      ),
      height: 80,
      child: const Text('1234'),
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return Container(
      height: 80,
      color: Color.fromARGB(100, 141, 166, 255),
    );
  },
)

方法二：仅给首个列表项添加顶部外边距 #

如果你不想给整个列表加内边距，只想让第一个列表项和AppBar隔开，可以在itemBuilder里判断当前项的索引，给索引为0的项单独设置margin：

ListView.separated(
  itemCount: 2,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      // 仅第一个项添加顶部外边距
      margin: index == 0 ? const EdgeInsets.only(top: 16.0) : EdgeInsets.zero,
      decoration: BoxDecoration(
        border: Border.all(
          color: Color.fromARGB(100, 141, 166, 255),
          width: 0.5
        ),
        borderRadius: BorderRadius.circular(10)
      ),
      height: 80,
      child: const Text('1234'),
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return Container(
      height: 80,
      color: Color.fromARGB(100, 141, 166, 255),
    );
  },
)

方法三：用Column包裹ListView添加间距（适合复杂布局） #

如果你的页面还有其他头部元素，或者需要更灵活的布局，可以用Column把一个空白的SizedBox和ListView放在一起，注意要给ListView设置shrinkWrap: true和physics: NeverScrollableScrollPhysics()（或者根据需求调整滚动行为）：

Column(
  children: [
    // 顶部间距
    const SizedBox(height: 16.0),
    Expanded(
      child: ListView.separated(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: 2,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Color.fromARGB(100, 141, 166, 255),
                width: 0.5
              ),
              borderRadius: BorderRadius.circular(10)
            ),
            height: 80,
            child: const Text('1234'),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(
            height: 80,
            color: Color.fromARGB(100, 141, 166, 255),
          );
        },
      ),
    ),
  ],
)

这三种方法里，方法一最推荐，简单高效，大部分场景都适用～

内容的提问来源于stack exchange，提问作者GDTyka