dart - 如何修复 Flutter Viewport 中双向无限滚动中的子偏移更新延迟

问题描述

所以我试图在每个 SliverItem 中使用粘性标题进行双向滚动。

我使用https://github.com/fluttercommunity/flutter_sticky_headers作为项目在两个方向上无限滚动。


      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text(widget.title),),
          body: Scrollable(
            controller: _controller,
            viewportBuilder: (BuildContext context, ViewportOffset offset) {
              return Viewport(
                  offset: offset,
                  center: positiveListKey,
                  slivers: [
                    _negativeListView,
                    _positiveListView,
                  ]);
            },
          ),
        );
      }

      SliverList get _positiveListView => SliverList(
        key: positiveListKey,
        delegate: SliverChildBuilderDelegate((context, index) {
          return StickyHeader(
            header: new Container(
              height: 50.0,
              color: Colors.blueGrey[700],
              padding: new EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: new Text('Header #$index',
                style: const TextStyle(color: Colors.white),
              ),
            ),
            content: new Container(
              height: 300,
              child: Text("Context #${index.toString()}"),
            ),
          );
        }),

      );

      SliverList get _negativeListView => SliverList(
        delegate: SliverChildBuilderDelegate((context, i) {
          int index = (i + 1) * -1;
          return Container(
            child: StickyHeader(
              header: new Container(
                height: 50.0,
                color: Colors.blueGrey[700],
                padding: new EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: new Text('Header #$index',
                  style: const TextStyle(color: Colors.white),
                ),
              ),
              content: new Container(
                height: 300,
                child: Text("Context #${index.toString()}"),
              ),
            ),
          );
        }),

      );

这是一些截屏视频 - https://i.ibb.co/ZLJvwsG/sticky-jump.gif

或https://ibb.co/98vBfXc

问题是当两个 SliverLists 在视口中可见时，粘性标题开始跳跃。StickyHeader 包非常简单——它只是markNeedsLayout在滚动位置发生变化时更新标题 el 的位置（作为侦听器）。

这是位置计算 - https://github.com/fluttercommunity/flutter_sticky_headers/blob/master/lib/sticky_headers/render.dart#L94

这是事件绑定https://github.com/fluttercommunity/flutter_sticky_headers/blob/master/lib/sticky_headers/render.dart#L79

_scrollable有定义Scrollable.of(context);

它看起来像或滚动事件触发了一些延迟，或者视口重绘，创建了这种类型的效果。

需要一些帮助或解决方案或解释 - 为什么会发生？

真的，只要解释一下原因就足够了）我想首先了解为什么会发生这种情况。因为有了理解，我将能够提供有效的解决方案）

更新

好的，所以过了一段时间我发现原来的问题是什么。为了根据需要制作滚动列表，我制作了自己的包来解决这个问题）

https://github.com/TatsuUkraine/flutter_sticky_infinite_list