SliverList 上的粘性标题答案

【问题标题】：Sticky headers on SliverListSliverList 上的粘性标题
【发布时间】：2018-10-31 14:05:39
【问题描述】：

我看过新的颤振视频并看到了一些有趣的内容。（不是典型的sticky header或者展开列表，所以不知道怎么命名）

Video - 从 0:20 开始观看

有人知道如何使用 SliverList 创建这种类型的带有标题的列表吗？

【问题讨论】：

你有什么尝试吗？

标签： flutter

【解决方案1】：

一种方法是创建一个CustomScrollView 并将一个固定到true 的SliverAppBar 和一个SliverFixedExtentList 对象与您的小部件一起传递。

例子：

List<Widget> _sliverList(int size, int sliverChildCount) {
    var widgetList = new List<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),
    ),
  );
}

【讨论】：

@JayMungara .. 是糖语法。
例如 var a = createA()..Do1()..Do2();
同，var a = createA(); a.Do1(); a.Do2();
没有SliverAppBar怎么用？
如何一次只显示一个条形应用栏？现在它只是继续添加，如果添加太多，布局看起来很奇怪。

【解决方案2】：

SliverPersistentHeader 是您可以使用的SliverAppBar 后面更通用的小部件。

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

【讨论】：