如何检测 SliverAppBar 被固定答案

【问题标题】：How to detect SliverAppBar is pinned如何检测 SliverAppBar 被固定
【发布时间】：2021-01-05 01:04:39
【问题描述】：

我对我的申请不满意。我想要做的是当 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),
          ]),
        ),
      ],
    );
  }
}

【问题讨论】：

标签： flutter flutter-sliver sliverappbar

【解决方案1】：

您需要做几件事。首先，您需要一个有状态的小部件，以便您可以更改固定标志的状态并重建 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中的控制器参数中。

【讨论】：