flutter SliverList上的粘滞标头

tez616oj  于 2022-12-14  发布在  Flutter
关注(0)|答案(2)|浏览(146)

我看过新的flutter视频,也看过一些有趣的。(它不是典型的粘性标题或可扩展列表,所以我不知道如何命名它)
Video-从0:20开始观看
有谁知道我如何使用SliverList创建这样一个带有标题的列表吗?

vh0rcniy

vh0rcniy1#

一种方法是创建一个CustomScrollView,并将一个SliverAppBar固定到true和一个带有Widget的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),
    ),
  );
}

e3bfsja2

e3bfsja22#

SliverPersistentHeaderSliverAppBar后面的更通用的小部件,您可以使用它。

SliverPersistentHeader(
    delegate: SectionHeaderDelegate("Section B"),
    pinned: true,
),

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;
}

相关问题