flutter的ListView添加HeaderView和FooterView使用CustomScrollView + SliverToBoxAdapter + SliverList来实现.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter App'),),
body: ListViewAddHeaderView(),
),
);
}
}
class ListViewAddHeaderView extends StatelessWidget {
// 列表项
Widget _buildListItem(BuildContext context, int index) {
return ListTile(
title: Text('list tile index $index')
);
}
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
// 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹
SliverToBoxAdapter(
child: Container(
height: 120,
color: Colors.green,
child: Text('HeaderView',
style: TextStyle(color: Colors.red, fontSize: 20),),
),
),
// 当列表项高度固定时，使用 SliverFixedExtendList 比 SliverList 具有更高的性能
SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
_buildListItem, childCount: 18),
itemExtent: 48.0
),
SliverToBoxAdapter(
child: Container(
height: 120,
color: Colors.green,
child: Text('FotterView',
style: TextStyle(color: Colors.red, fontSize: 20),),
),
),
],
);
}
}
想了解更多Flutter学习知识请联系:QQ(814299221)
