Flutter开发之ListView添加HeaderView和FooterView（38）

参考文章&＃xff1a;Flutter ListView如何添加HeaderView和FooterView

flutter的ListView添加HeaderView和FooterView使用CustomScrollView &＃43; SliverToBoxAdapter &＃43; SliverList来实现。

页面完整代码&＃xff1a;

import &＃39;package:flutter/material.dart&＃39;;class ListViewAddHeaderView extends StatelessWidget {// 列表项Widget _buildListItem(BuildContext context, int index){return ListTile(title: Text(&＃39;list tile index $index&＃39;));}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;List Add HeaderView&＃39;),),body: CustomScrollView(slivers: [// 如果不是Sliver家族的Widget&＃xff0c;需要使用SliverToBoxAdapter做层包裹SliverToBoxAdapter(child: Container(height: 120,color: Colors.green,child: Text(&＃39;HeaderView&＃39;,style: TextStyle(color: Colors.red,fontSize: 20),),),),// 当列表项高度固定时&＃xff0c;使用 SliverFixedExtendList 比 SliverList 具有更高的性能SliverFixedExtentList(delegate: SliverChildBuilderDelegate(_buildListItem, childCount: 18),itemExtent: 48.0),SliverToBoxAdapter(child: Container(height: 120,color: Colors.green,child: Text(&＃39;FotterView&＃39;,style: TextStyle(color: Colors.red,fontSize: 20),),),),],),);}
}


运行效果

成功添加了头和尾部。