Flutter ListView如何添加HeaderView和FooterView

作過Android開發的同窗知道，Android的ListView提供addHeaderView和addFooterView兩個方法用於添加View到ListView；
RecyclerView則經過定義不一樣的ItemType區分HeaderViewItem和普通的ListItem，在Adapter中加上邏輯判斷返回對應的ViewHolder，處理起來仍是有點麻煩的。

---

而flutter的ListView怎麼處理呢？有兩種方式：

1. 參考RecyclerView的實現方式，定義不一樣類型的Item，若是想保持HeaderViewItem滾出屏幕外而不會被銷燬，須要使用KeepAlive控件對HeaderViewItem作一層包裹；
2. 使用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: <Widget>[
          // 若是不是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
          )
        ],
      ),
    );
  }
}

 

運行效果：