flutter - flutter 如何在 SliverAppBar 中显示 `floating: true` 与 Widget 高度大小一样多？（在自定义滚动视图中）

Question

CustomScrollViews我在 Flutter 中创建了一个列表滚动。

我想

• 第一排和第三排是固定的
• 第二行应该隐藏
• 向下滚动时，小部件（=第 2 行）完全显示而不会中断。

截屏

应用动作视频

（+ 向下滚动问题时高度很小） https://user-images.githubusercontent.com/51875059/104626582-6ce87e00-56d9-11eb-80c1-1dffd997927a.MP4

代码

@override
  Widget build(BuildContext context) {
    final list = List<int>.generate(100, (i) => i + 1);
    return CandySafeScaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            flexibleSpace: ATimelineTop(),
            elevation: 0.5,
          ),
          SliverAppBar(
            floating: true,
            flexibleSpace: _buildSearchFilter(context),
            expandedHeight: 60,
            elevation: 0.5,
          ),
          SliverAppBar(
            pinned: true,
            flexibleSpace: _buildBodyTop(context),
            elevation: 0.5,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, idx) {
                return ListTile(title: Text(list[idx].toString()));
              },
              childCount: list.length,
            ),
          )
        ],
      ),
    );

Answer 1

试试这个，首先创建persist sliver头类并应用到sliverAppBar：

class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  _SliverTabDelegate(this.minHeight, this.maxHeight, this.child);

  final Widget child;
  final double minHeight;
  final double maxHeight;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => maxHeight;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Theme.of(context).primaryColor,
      height: max(maxHeight - shrinkOffset, minHeight),
      child: Container(
        color: Theme.of(context).primaryColor,
        child: PreferredSize(
          preferredSize: Size.fromHeight(30),
          child: child,
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverTabDelegate oldDelegate) {
    return false;
  }
}

你把标题放在哪里：

slivers: [
  SliverPersistentHeader(
      pinned: true,
      delegate: _SliverTabDelegate(
        46,
        46,
        SliverAppBar() or AppBar()
...
  SliverPersistentHeader(
      pinned: true,
      delegate: _SliverTabDelegate(
        46,
        46,
        SliverAppBar() or AppBar()
]