0

我对我的申请很敏感。我想要做的是当 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),
          ]),
        ),
      ],
    );
  }
}
4

1 回答 1

2

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

于 2020-09-18T07:08:33.050 回答