Flutter:SliverPersistentHeader 在滚动时重建自身

Question

我已经为我遇到的这个问题构建了一个小测试示例。您可以从下面的 gif 中看到 Flutter 应用程序的顶部只有一个标题。当我下拉刷新时，标题不会自行重建。但是，当我向上插入页眉时，页眉会自行重建多次。另请注意，我没有在我的代码中的任何地方调用 setState()，因此我不确定当我向上插入 ScrollView 时它如何知道它需要重建自身。

我想 header 完全不重建自己，因为没有理由它应该重建自己。它是静态/无状态的，根本不应该改变。 header 的大小也不应更改(因此 expandedHeight 和 collapsedHeight 在 136.0 时相同)。

这是我用来重新创建此代码的示例代码:

import 'package:meta/meta.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:math' as math;
import 'dart:async';

class _TestHeader extends SliverPersistentHeaderDelegate {
  _TestHeader({
    @required this.collapsedHeight,
    @required this.expandedHeight,
    @required this.showHeading,
  });

  bool showHeading;
  final double expandedHeight;
  final double collapsedHeight;

  @override
  double get minExtent => collapsedHeight;

  @override
  double get maxExtent => math.max(expandedHeight, minExtent);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    print("rebuilding headings");
    return new SafeArea(
        child: Column(children: <Widget>[
      const SizedBox(height: 24.0),
      new GestureDetector(
        onTap: () {
        },
        child: new Container(
          decoration: const BoxDecoration(
            color: CupertinoColors.white,
            border: const Border(
              top: const BorderSide(color: const Color(0xFFBCBBC1), width: 0.0),
              bottom:
                  const BorderSide(color: const Color(0xFFBCBBC1), width: 0.0),
            ),
          ),
          height: 44.0,
          child: new Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            child: new SafeArea(
              top: false,
              bottom: false,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const <Widget>[
                  const Text(
                    'This is my heading',
                    style: const TextStyle(color: CupertinoColors.activeBlue, fontSize: 16.0),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    ]));
  }

  @override
  bool shouldRebuild(@checked _TestHeader oldDelegate) {
//    return false;
    return expandedHeight != oldDelegate.expandedHeight ||
        collapsedHeight != oldDelegate.collapsedHeight;
  }
}

class TestHeaderPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new TestHeaderState();
  }
}


class TestHeaderState extends State<TestHeaderPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new CupertinoPageScaffold(
      //i will need to convert this to a sliver list to make this work properly.
        backgroundColor: const Color(0xFFEFEFF4),
        navigationBar: new CupertinoNavigationBar(
          middle: new Text('Test Headers'),
        ),
        child: new SafeArea(
          child: new CustomScrollView(slivers: <Widget>[
            new CupertinoRefreshControl(onRefresh: () {
              print("pulling on refresh");
              return Future<void>(() {});
                }),
            new SliverPersistentHeader(
                delegate: new _TestHeader(
                    collapsedHeight: 136.0,
                    expandedHeight: 136.0,
                    showHeading: true)),
          ]),
        ));
  }

}

Answer 1

这是完全正常的。

您的 _TestHeader 不是小部件。仅仅因为它有 build 方法并不意味着它就是一个。 :)

您扩展了 SliverPersistentHeaderDelegate，它用于构建 SliverPersistentHeader。

问题是:SliverPersistentHeader 也不是小部件。它是一个条子，这是一种在屏幕上呈现内容的不同方式。

而且，在 SliverPersistentHeader 的情况下，它是一种特定类型的 sliver，每当滚动偏移发生变化时就会重建。也就是说，可能会处理特定于滚动的动画。例如向上滚动使标题消失。并向下滚动以使其弹回。