flutter的ListView添加HeaderView和FooterView使用CustomScrollView + SliverToBoxAdapter + SliverList來實(shí)現(xiàn).
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 {
// 列表項(xiàng)
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),),
),
),
// 當(dāng)列表項(xiàng)高度固定時(shí)痰催，使用 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學(xué)習(xí)知識(shí)請(qǐng)聯(lián)系:QQ(814299221)
