深入剖析ListView.separated

一、基本介绍

ListView.separated是Flutter框架中提供的一种显示列表数据的组件，在Flutter的众多开发中广泛被使用。类似于ListView.builder，ListView.separated也是一种动态创建列表视图，但是其支持更多的自定义配置，可以方便地创建分割线和一个或多个顶部和底部的widget。在本篇文章中，我们将从多个方面深入研究ListView.separated的用法和实现细节。

二、基本用法

ListView.separated和ListView.builder的用法有些类似。我们需要提供一个数据源，并且指定ListView的itemCount，然后通过itemBuilder回调构建各个item。而ListView.separated需要额外提供分割线的构建方式和顶部底部widget的构建方式。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('item $index'),
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return Divider();
  },
  itemCount: 20,
);

代码示例中展示了一个简单的ListView.separated。我们为其提供20个数据源，每个数据源被转化为一个ListTile来展示，中间通过Divider分割。

三、自定义分割方式

除了使用Divider作为分割方式，我们还可以使用自己喜欢的组件作为分割方式。ListView.separated提供了separatorBuilder回调，您可以在其中自定义分割组件。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('item $index'),
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return Container(
      height: 1,
      width: double.infinity,
      color: Colors.grey[300],
    );
  },
  itemCount: 20,
);

这里我们将分割线的构造方式修改为最简单的容器形式，其高度为1，宽度为ListView的宽度，颜色为灰色。您可以根据实际需求自定义分割方式。

四、自定义顶部和底部widget

ListView.separated不仅支持分割线自定义，还支持顶部和底部widget的自定义。我们可以使用headerBuilder和footerBuilder回调，构建需要展示的widget。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('item $index'),
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return Divider();
  },
  headerBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('header'),
    );
  },
  footerBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('footer'),
    );
  },
  itemCount: 20,
);

在代码示例中，我们通过headerBuilder和footerBuilder回调为ListView.separated创建了一个顶部和一个底部的ListTile。注意，headerBuilder和footerBuilder回调函数接收的index都为0，因为它们并不参与数据源的计算。

五、性能优化

ListView.separated作为一个数据展示组件，性能优化是非常重要的。我们可以通过一些手段来优化ListView.separated的性能。

1、使用const widget

在ListView.separated中，您可以使用const widget来优化性能。这样做可以避免在每次构建widget时执行无意义的重复操作，而只需要复制现有的widget。对于静态widget，在构建中使用const可以避免不必要的重建。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
    return const ListTile(
      title: Text('item'),
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return const Divider();
  },
  itemCount: 20,
);

2、使用AutomaticKeepAlive

在ListView.separated中，如果您的子widget继承自StatefulWidget，则可以实现AutomaticKeepAliveMixin，将子widget保存在状态中，以避免不必要的重建。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const ListTile(
      title: Text('item'),
    );
  }
}

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
    return MyWidget();
  },
  separatorBuilder: (BuildContext context, int index) {
    return const Divider();
  },
  itemCount: 20,
);
   

3、使用ListView.builder

在有些情况下，您可以使用ListView.builder来替换ListView.separated，并通过在itemBuilder中手动指定分割线的方式来达到更好的性能表现。

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    if(index.isOdd) {
      return const Divider();
    } else {
      return ListTile(
        title: Text('item $index'),
      );
    }
  },
  itemCount: 20,
);

六、总结

通过以上的介绍，我们可以看到ListView.separated是一个很实用的列表数据展示组件，支持自定义分割线、顶部和底部widget的展示。除此之外，性能优化也是使用ListView.separated的必要操作。希望这篇文章能够对大家在使用ListView.separated时有所帮助。