如何检测SliverAppBar已固定

Question

我对我的申请很感兴趣。我想要做的是，当SliverAppBar完全向上滚动时，我想在其中显示一个不同的小部件。

有人能在这方面提供一些帮助吗？

我知道使用SliverPersistentHeader可以做这样的事情。但是有没有办法根据头部的位置来显示和隐藏头部呢？

class SliversBasicPage extends StatelessWidget {
  _isPinned() {
    return false;
  }
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          floating: false,
          expandedHeight: 120.0,
          flexibleSpace: FlexibleSpaceBar(
            title: _isPinned() ? Text('PINNED') : Text('NOT PINNED'),
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50,
          delegate: SliverChildListDelegate([
            Container(color: Colors.red),
            Container(color: Colors.green),
            Container(color: Colors.blue),
          ]),
        ),
      ],
    );
  }
}

Answer 1

有几件事你需要做。首先，您需要一个statefull小部件，以便更改固定标志的状态并重新构建UI。其次，您将需要一个ScrollController来侦听滚动状态，并根据应用程序栏的折叠/非折叠状态将值切换为isPinned。

控制器可能如下所示：

final ScrollController _sliverScrollController = ScrollController();
  var isPinned = false;

.....

  @override
  void initState() {
    super.initState();

    _sliverScrollController.addListener(() {
      if (!isPinned &&
          _sliverScrollController.hasClients &&
          _sliverScrollController.offset > kToolbarHeight) {
        setState(() {
          isPinned = true;
        });
      } else if (isPinned &&
          _sliverScrollController.hasClients &&
          _sliverScrollController.offset < kToolbarHeight) {
        setState(() {
          isPinned = false;
        });
      }
    });
  }

.....

将此控制器添加到CustomScrollView中的控制器参数。