4种使用方式

  • ListView
  • ListView.builder
  • ListView.separated
  • ListView.custom

其中ListView是最简单的使用方式,直接放入Item即可,经常用于Demo的编写,以及少数几个类型不同Item的容器:

    final listView = ListView(
      children: <Widget>[
        ListTile(title: Text("Item0"),),
        ListTile(title: Text("Item1"),),
      ],
    );

ListView.builder则适合用于Item类型一致或者有规律的地方,其中可以指定itemCount:

    final listView = ListView.builder(
      itemBuilder: (context, index) => ListTile(
        title: Text("Item${index}"),
      ),
      itemCount: 100,
    );

ListView.separated则用于需要设置分割线或者中间穿插广告的列表:

    final listView = ListView.separated(
      itemBuilder: (context, index) => ListTile(
        title: Text("Item${index}"),
      ),
      separatorBuilder: (context, index) => Divider(),
      itemCount: 100,
    );

ListView.custom一般很少用到,除非使用内置的效果无法满足你的需求,你需要自行实现一个SliverChildDelegate,目前内置的实现有SliverChildListDelegate:

    final listView = ListView.custom(
        childrenDelegate: SliverChildListDelegate([
      Text("Item0"),
      Text("Item1"),
    ]));

滚动效果

滚动的效果是通过physics属性控制的,目前内置的实现比较常见的有下面这几种:

  • ClampingScrollPhysics
  • AlwaysScrollableScrollPhysics
  • BouncingScrollPhysics
  • NeverScrollableScrollPhysics
  • PageScrollPhysics

滚动控制

ListView中也可以使用ScrollController来进行滚动控制:

  • 获取当前滚动的距离
  • 滚动到指定的位置

获取当前滚动的距离

ScrollController _controller = ScrollController();
double offset = _controller.offset;

滚动到指定的位置

  • 直接滚动,没有动效
ScrollController _controller = ScrollController();
_controller.jumpTo(0);
  • 平滑滚动,带动效
ScrollController _controller = ScrollController();
_controller.animateTo(0,
                duration: Duration(seconds: 3), curve: Curves.linear);