Как исправить задержку обновления дочернего смещения в двунаправленной бесконечной прокрутке в окне просмотра Flutter - PullRequest
Новая
       27

Как исправить задержку обновления дочернего смещения в двунаправленной бесконечной прокрутке в окне просмотра Flutter

0 голосов
/ 10 января 2019

Так что я пытаюсь сделать двунаправленную прокрутку с липкими заголовками в каждом 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

Проблема в том, что когда оба списка SliverList видны в окне просмотра, липкий заголовок начинает прыгать. Пакет StickyHeader довольно прост - он просто обновляет позицию заголовка el (с markNeedsLayout в качестве слушателя), когда изменяется позиция прокрутки.

Вот расчет позиции - 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);

Похоже, или прокручивает событие с некоторой задержкой, или перерисовывает Viewport, что создает этот тип эффекта.

Нужна помощь или с решением или с объяснением - почему это происходит?

Действительно, мне будет достаточно только объяснения причины) Я хочу понять, почему это происходит в первую очередь. Так как с пониманием я смогу предоставить решение, которое работает)

...