Flutter ListView如何添加HeaderView和FooterView-白红宇

Flutter ListView如何添加HeaderView和FooterView

阅读量：4082 次

发布时间：2019-05-25

本文共 1268 字，大约阅读时间需要 4 分钟。

做过Android开发的同学知道，Android的ListView提供addHeaderView和addFooterView两个方法用于添加View到ListView；

RecyclerView则通过定义不同的ItemType区分HeaderViewItem和普通的ListItem，在Adapter中加上逻辑判断返回对应的ViewHolder，处理起来还是有点麻烦的。

而flutter的ListView怎么处理呢？有两种方式：

参考RecyclerView的实现方式，定义不同类型的Item，如果想保持HeaderViewItem滚出屏幕外而不会被销毁，需要使用KeepAlive控件对HeaderViewItem做一层包裹；

使用CustomScrollView + SliverToBoxAdapter + SliverList；

推荐使用方式2，实现简单没有多余的判断逻辑处理，废话少说，直接上代码：

class MyHomePage extends StatelessWidget {  // 列表项  Widget _buildListItem(BuildContext context, int index){    return ListTile(      title: Text('list tile index $index')    );  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Demo'),      ),      body: CustomScrollView(        slivers: 
   
    [          // 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹          SliverToBoxAdapter(            child: Container(              height: 120,              color: Colors.green,              child: Text('HeaderView'),            ),          ),          // 当列表项高度固定时，使用 SliverFixedExtendList 比 SliverList 具有更高的性能          SliverFixedExtentList(              delegate: SliverChildBuilderDelegate(_buildListItem, childCount: 30),              itemExtent: 48.0          )        ],      ),    );  }}

运行效果

在这里插入图片描述