我看过新的flutter视频,也看过一些有趣的。(它不是典型的粘性标题或可扩展列表,所以我不知道如何命名它)Video-从0:20开始观看有谁知道我如何使用SliverList创建这样一个带有标题的列表吗?
vh0rcniy1#
一种方法是创建一个CustomScrollView,并将一个SliverAppBar固定到true和一个带有Widget的SliverFixedExtentList对象。示例:
CustomScrollView
SliverAppBar
true
SliverFixedExtentList
List<Widget> _sliverList(int size, int sliverChildCount) { var widgetList = <Widget>[]; for (int index = 0; index < size; index++) widgetList ..add(SliverAppBar( title: Text("Title $index"), pinned: true, )) ..add(SliverFixedExtentList( itemExtent: 50.0, delegate: SliverChildBuilderDelegate((BuildContext context, int index) { return Container( alignment: Alignment.center, color: Colors.lightBlue[100 * (index % 9)], child: Text('list item $index'), ); }, childCount: sliverChildCount), )); return widgetList; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Slivers"), ), body: CustomScrollView( slivers: _sliverList(50, 10), ), ); }
e3bfsja22#
SliverPersistentHeader是SliverAppBar后面的更通用的小部件,您可以使用它。
SliverPersistentHeader
SliverPersistentHeader( delegate: SectionHeaderDelegate("Section B"), pinned: true, ),
而SectionHeaderDelegate可以用如下代码来实现:
SectionHeaderDelegate
class SectionHeaderDelegate extends SliverPersistentHeaderDelegate { final String title; final double height; SectionHeaderDelegate(this.title, [this.height = 50]); @override Widget build(context, double shrinkOffset, bool overlapsContent) { return Container( color: Theme.of(context).primaryColor, alignment: Alignment.center, child: Text(title), ); } @override double get maxExtent => height; @override double get minExtent => height; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => false; }
2条答案
按热度按时间vh0rcniy1#
一种方法是创建一个
CustomScrollView
,并将一个SliverAppBar
固定到true
和一个带有Widget的SliverFixedExtentList
对象。示例:
e3bfsja22#
SliverPersistentHeader
是SliverAppBar
后面的更通用的小部件,您可以使用它。而
SectionHeaderDelegate
可以用如下代码来实现: