将 snapConfiguration 实现到 SliverPersistentHeader

Question

我正在尝试为 SliverPersistentHeader 实现 snap 功能，但无法弄清楚，也找不到关于此的良好文档。

我的代码：

    class MyDelegate extends SliverPersistentHeaderDelegate  {
      double he;
    
      MyDelegate ({required this.he}) : super();
    
      @override
      Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
        return AnimatedContainer(
          child: const Text('Title', textAlign: TextAlign.center, style: TextStyle(fontSize: 24),),
          color: Colors.green,
          height: he,
          duration: const Duration(milliseconds: 100),
        );
      }
    
      @override
      double get maxExtent => kToolbarHeight;
    
      @override
      double get minExtent => 0;
    
      @override
      bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
        return true;
      }
    
      @override
      FloatingHeaderSnapConfiguration get snapConfiguration => FloatingHeaderSnapConfiguration();    
    }

浮动设置为真。

我收到有关 vsync 为空的错误消息。
我无法让它发挥作用。我需要有关为 SliverPersistenHeader 实现快照功能的帮助。

Answer 1

我设法解决了这个问题。我唯一需要做的就是提供 vsync。
为此，我需要将 with TickerProviderStateMixin 添加到我的代码中：

class _CustomBodyState extends State<CustomBody> with TickerProviderStateMixin {

并在构建方法中 vsync: this:

child: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverPersistentHeader(delegate: MyDelegate(minExtent: 0, maxExtent: kToolbarHeight, vsync: this), floating: true),
          const CustomSliverListTile(),
        ],
      ),

并将 MyDelegate 更改为：

class MyDelegate extends SliverPersistentHeaderDelegate  {
  @override
  final double minExtent;
  @override
  final double maxExtent;
  @override
  final TickerProvider vsync;

  MyDelegate ({required this.minExtent, required this.maxExtent, required this.vsync}) : super();

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      child: const Text('Title', textAlign: TextAlign.center, style: TextStyle(fontSize: 24),),
      color: Colors.green,
      height: maxExtent,
    );
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

@override 
  FloatingHeaderSnapConfiguration get snapConfiguration => FloatingHeaderSnapConfiguration(
    curve: Curves.linear, 
    duration: const Duration(milliseconds: 100),
  );
}

将 snapConfiguration 实现到 SliverPersistentHeader

Implementing snapConfiguration to SliverPersistentHeader

android

ios

flutter

flutter-animation

flutter-sliver