Flutter之ListView使用【一】

原创

贺公子之数据科学与艺术 2025-10-15 09:03:22 ©著作权

文章标签 Text 示例代码控件 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者贺公子之数据科学与艺术的原创作品，请联系作者获取转载授权，否则将追究法律责任

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.lvse) : 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
      )
    )
  ]
);