Flutter之ListView使用【一】

贺公子之数据科学与艺术

发布于 2025-12-17 21:18:14

1850

ListView 的基本用法

ListView 是 Flutter 中用于展示一组连续视图元素的控件，支持垂直或水平方向滚动。适用于需要展示大量数据的场景，如通信录、商家列表等。

默认构造函数 适用于少量子 Widget 的场景，一次性创建所有子 Widget，性能较差。示例代码：

ListView(
  children: <Widget>[
    ListTile(leading: Icon(Icons.map), title: Text('Map')),
    ListTile(leading: Icon(Icons.mail), title: Text('Mail')),
    ListTile(leading: Icon(Icons.message), title: Text('Message')),
  ]
);

水平滚动 ListView 通过设置 scrollDirection: Axis.horizontal 实现水平滚动。示例代码：

ListView(
  scrollDirection: Axis.horizontal,
  itemExtent: 140,
  children: <Widget>[
    Container(color: Colors.black),
    Container(color: Colors.red),
    Container(color: Colors.blue),
  ]
);

ListView.builder 构造函数

适用于大量子 Widget 的场景，动态创建子 Widget，提升性能。关键参数：

itemBuilder：子 Widget 的创建方法。
itemCount：列表项数量（可选，若为 null 则为无限列表）。

示例代码：

ListView.builder(
  itemCount: 100,
  itemExtent: 50.0,
  itemBuilder: (context, index) => ListTile(
    title: Text("title $index"),
    subtitle: Text("body $index")
  )
);

性能优化建议 对于定高的列表项，建议设置 itemExtent，避免动态计算高度带来的性能损耗。

ListView.separated 构造函数

支持自定义分割线，通过 separatorBuilder 动态设置分割线样式。示例代码：

ListView.separated(
  itemCount: 100,
  separatorBuilder: (context, index) => 
    index % 2 == 0 ? Divider(color: Colors.green) : Divider(color: Colors.red),
  itemBuilder: (context, index) => ListTile(
    title: Text("title $index"),
    subtitle: Text("body $index")
  )
);

CustomScrollView 的使用

用于解决多 ListView 嵌套时滑动效果不一致的问题。 Sliver 的概念 将独立的可滚动控件（如 SliverList、SliverAppBar）统一管理，确保滑动效果一致。

滚动视差示例 通过 CustomScrollView 实现多层背景以不同速度移动的视差效果。示例代码：

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(title: Text('视差滚动示例')),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("Item $index")),
        childCount: 50
      )
    )
  ]
);