Блог

Главная - Вопросы по программированию - Постоянный заголовок NestedScrollView иногда выглядит неудобно

Постоянный заголовок NestedScrollView иногда выглядит неудобно

#flutter #nestedscrollview

#flutter #nestedscrollview

Вопрос:

Часто, когда прокрутка выполняется достаточно быстро, мое приложение показывает небольшую прозрачную линию между видом прокрутки и постоянным заголовком.

Минимальный воспроизводимый код: https://gist.github.com/Moonspeaker/0e8573ff6620a7e00b8f7b04937b51a1

Вот как это выглядит на видео: https://www.youtube.com/watch?v=DDxu1NTkaMAamp;feature=youtu.be

Я понятия не имею, как это исправить. Проблема, похоже, в Align виджете с. Alginment.bottomCenter Column с MainAxisAlignment.end работает точно так же.

Ошибка в постоянном заголовке Flutter - nestedscrollview

Комментарии:

1. Можете ли вы обвести «маленькую прозрачную линию», на которую вы ссылаетесь? Я вижу только «большую белую линию» и «маленькую красную линию под белой линией».

2. Фон всего приложения красный. Эта маленькая красная линия — это граница между listview и header, которой там быть не должно.

3. Я не могу воспроизвести вашу проблему, используя «минимальный воспроизводимый код». Я просто использую эмулятор (Android и iOS).

4. это происходит как в версиях release, так и в версиях debug на эмуляторе и реальном устройстве. Прокрутите вверх и вниз несколько раз, и вы увидите, как это происходит

5. Снимок экрана был сделан в приложении, скомпилированном на основе этого gist. Протестировано на sdk: «> = 2.12.0-29.10.бета <3.0.0», последняя бета-версия канала flutter.

Ответ №1:

Попробуйте обернуть ваш SliverPersistentHeader с помощью SliverOverlapAbsorber обычно при работе с NestedScrollView вам нужно будет обернуть заголовок в этот объект, чтобы не столкнуться с редкими артефактами прокрутки, такими как красная строка, которую вы описали.

Я не смог воспроизвести проблему с указанным ниже изменением. Но вы также можете взглянуть на SliverOverlapInjector и документацию по классу NestedScrollView, в которой есть примеры использования обоих этих виджетов

 ...
NestedScrollView(
            headerSliverBuilder: (context, scrolling) => [
              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverPersistentHeader(
                  delegate: _Delegate(),
                  pinned: true,
                ),
...