Flutter第九弹 构建列表元素间距

在Flutter中，可以使用ListView.builder构建列表，并通过SizedBox.shrink()或SizedBox.expand()控制列表元素之间的间距。以下是一个简单的例子，展示如何在列表元素之间添加间距：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 100, // 假设有100个列表项
          itemBuilder: (context, index) {
            // 添加分隔线
            if (index > 0) {
              return Column(
                children: <Widget>[
                  // 列表项之间的间距
                  SizedBox(height: 10.0), // 水平间距
                  // 列表项本身
                  ListTile(
                    title: Text('Item $index'),
                  ),
                ],
              );
            }
            // 第一个列表项不需要额外间距
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

在这个例子中，ListView.builder用于构建一个可滚动的列表。itemBuilder回调函数为每个列表项动态构建widget。对于除第一个项目外的所有项目，我们在它们前面添加了一个SizedBox小部件，该小部件的高度设置为10.0，从而创建了垂直间距。这样，列表元素之间将有一个10像素的间隔。