Синхронизируем скроллы в Sliver-списках

Всем привет, на связи Иван, тимлид и ведущий Flutter-разработчик Surf.
Сегодня потрогаем тему синхронизации двух списков при скролле и раскроем важные моменты при её реализации.

В одном из наших проектов дизайн предполагал синхронизацию горизонтального и вертикального Sliver-скроллов для последовательного перехода между разными категориями списков.

Спойлер: мы попробовали разные варианты решения и нашли оптимальный.

Для начала можно почитать полезные штуки:

Slivers
slivers_tools
flutter_sticky_header
scroll_to_index

Постановка задания

Иногда нужно сделать хитрый скролл с разными списками. Сама же секция со скроллом должна быть реализована Sliver-виджетами, а секция горизонтального списка должна быть зафиксирована при скролле.

Продуктовая история проста: горизонтальный список с чипсами — список категорий продуктов, вертикальный — секции категорий и список продуктов, которые соответствуют этим категориям.
Примерно такую вёрстку получает разработчик от дизайнеров:

Сегодня мы с вами разберём решение с такой логикой и поймём, с каким проблемами можно столкнутся.

Заготовка экрана

Заготовим шаблон экрана на основе StatefulWidget, в состояние которого поместим наш будущий контроллер. 

Мы делегируем ему управление виджетом, State этого виджета нужен нам  для dispose контроллера.
И тут всплывают два момента:

1) Появляется DecoratedSliver — очень редкий виджет. Он используется для декорирования сливеров в иерархии. В нашем случае он нужен, чтобы разделить секции Sliver-виджетов с разными заливками и скруглениями.

2) После CupertinoRefreshControl мы используем SliverStickyHeader.
Расскажем, почему.
Мы используем SliverStickyHeader вместо коробочного SliverPersistentHeader, потому что последующие формулы расчета будут корректно работать только с SliverStickyHeader. 

Если же мы возьмём  SliverList + SliverPersistentHeader, то можем столкнуться с  проблемой разбиения контекста между Sliver-виджетами и последующим расчетом виджетов из вертикального списка.

Подобные проблемы описывались здесь.

Так мы получаем бесконечный офсет и при попытке скролла через контроллер скроллимся в конец списка — эту проблему и будем решать.

Возможно, вы уже сталкивались с чем-то подобным в функции ensureVisible() у объекта Scrollable.

У SliverStickyHeader обязательно устанавливаем параметр overlaps: true. Он указывает, что этот Header будет встроен как в стеке. У нижнего Sliver-виджета устанавливаем отступ хотя бы на высоту вертикального списка, который находится в Header.

Заготовка экрана

Заготовим шаблон для нашего контроллера окна на основе ChangeNotifier, который будет им управлять.

Для перемещения скролла к нужной позиции используем AutoScrollController — контроллеры из собственного пакета scroll_to_index. Это обертки над ScrollController и они нужны, чтобы не писать дополнительную логику линкования BuildContext в хеш-таблицу по индексу категории.

Из него же мы потом будем рассчитывать по сохраненному BuildContext рендер-объекты и расстояние до них.

final class _Controller extends ChangeNotifier {   // Смещение отступа для вертикального списка   static const double _scrollStickyOffset = 112;   _Controller() {     // Добавляем слушатель для расчета видимости категории     // при прокрутке вертикального списка     verticalScrollController.addListener(       _calculateCategoryVisible,     );     _randomizeCategories();   }    // Список категорий с продуктами   List<Category> categories = [];   // Текущий выбранный индекс категории   int categoryIndex = 0;   // Флаг игнорирования скролла в случае выбора нужной категории   bool _isIgnoreCatalogScroll = false;   // AutoScroll Контроллеры горизонтального и вертикального списков   final AutoScrollController horizontalScrollController = AutoScrollController(     axis: Axis.horizontal,   );   final AutoScrollController verticalScrollController = AutoScrollController(     axis: Axis.vertical,   );    // Расчёт нужной позиции скролла до нужного индекса конкретного AutoScroll контроллера   // Не привязан к конкретному контроллеру   double? _getCategoryOffset(     int index,     AutoScrollController controller,   ) {}    // Расчёт видимости конкретной категории при прокрутке вертикального списка   void _calculateCategoryVisible() {}   // Скроллим до нужной горизонтальной категории   // Необходимо в нескольких местах - при скроллера вертикального списка   // и при выборе другой категории   Future<void> _scrollToHorizontalCategory(     int index,   ) async {}    // Рефреш и рандомизация новых категорий с продуктами   Future<void> onRefresh() async {}    // Выбор нужной категории   void onPressedCategory({     required int index,   }) async {}    // Не забываем диспоузить контроллеры   @override   void dispose() {     horizontalScrollController.dispose();     verticalScrollController.dispose();     super.dispose();   } }

Расчёт позиции скролла

Реализуем функцию, которая будет рассчитывать смещение к нужной позиции скролла AutoScrollController.

// Расчёт нужной позиции скролла до нужного индекса конкретного AutoScroll контроллера // Не привязан к конкретному контроллеру double? _getCategoryOffset(   int index,   AutoScrollController controller, ) {   // Получаем контекст виджета по индексу от AutoScroll контроллера   // Этот контекст был сохранен в момент билда и позволяет найти рендер-область виджета   final BuildContext? context = controller.tagMap[index]?.context;   if (context == null) {     return null;   }    // Находим рендер-область виджета   final RenderObject? renderBox = context.findRenderObject();   if (renderBox == null) {     return null;   }    // По полученной рендер-области получаем порт и вычисляем смещение от начала скролла   final RenderAbstractViewport viewport = RenderAbstractViewport.of(renderBox);   final RevealedOffset revealedOffset = viewport.getOffsetToReveal(     renderBox,     0,   );   // При таком расчет функция getOffsetToReveal может возвращать объект RevealedOffset   // со смещением double.infinity.   // Это означает что не удалось вычислить смещение от начала скролла, допустим, такого виджета   // в иерархии виджетов внутри скролла нет   if (revealedOffset.offset == double.infinity) {     return null;   }    return revealedOffset.offset; }

Расчёт положения вертикального скролла

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

// Расчёт видимости конкретной категории при прокрутке вертикального списка void _calculateCategoryVisible() {   if (_isIgnoreCatalogScroll) {     return;   }    int newIndex = 0;   // Проходим по всем индексам вертикального AutoScroll контроллера   for (final int index in verticalScrollController.tagMap.keys) {     // Находим вертикальное смещение до индекса у функции, которую заготовили заранее     final double? offset = _getCategoryOffset(       index,       verticalScrollController,     );     if (offset == null) {       continue;     }      // Если же вертикальный контроллер еще не достиг большего значения смещения     // Значит другая категория еще не находится в зоне видимости     if (offset >= verticalScrollController.offset + _scrollStickyOffset) {       continue;     }      newIndex = index;   }    if (categoryIndex == newIndex) {     return;   }    categoryIndex = newIndex;   notifyListeners();   _scrollToHorizontalCategory(newIndex); }

Не забываем добавить эту функцию на прослушивание у нашего вертикального скролл-контроллера:

_Controller() {   // Добавляем слушатель для расчёта видимости категории   // при прокрутке вертикального списка   verticalScrollController.addListener(     _calculateCategoryVisible,   );   _randomizeCategories(); }

Скролл горизонтальной позиции

Выделяем в отдельную функцию скролл к нужной позиции горизонтального списка.

Условие с нулевым индексом необходимо, чтобы попасть в начало списка. Нам не нужно делать видимым часть первого виджета на экране, потому что у большинства элементов в списках есть отступы.

Другой случай, если первым в таком горизонтальном списке находится не сам компонент, отображающий текущую категорию, а ещё один компонент с кнопкой поиска. А она ведёт на другую страницу или, например, открывает нижнюю панель.

// Скроллим до нужной горизонтальной категории // Необходимо в нескольких местах - при скроллера вертикального списка // и при выборе другой категории Future<void> _scrollToHorizontalCategory(   int index, ) async {   if (index == 0) {     return horizontalScrollController.animateTo(       0,       duration: scrollAnimationDuration,       curve: Curves.easeInOut,     );   }    return horizontalScrollController.scrollToIndex(     index,   ); }

Выбор категории списка

Реализуем функцию-обработчик нажатия выбора новой категории горизонтального списка.

Функцию рефреша onRefresh() экрана можно реализовать по-своему — в нашем примере логики содержать она не будет.

// Выбор нужной категории void onPressedCategory({   required int index, }) async {   if (index == categoryIndex) {     return;   }    // Так используем заготовленную функцию для получения смещения скролла вертикального списка   final double? offset = _getCategoryOffset(     index,     verticalScrollController,   );   if (offset == null) {     return;   }    // Обновляем новый индекс   categoryIndex = index;   notifyListeners();   // Перемещаемся на новую позицию в горизонтальном списке   _scrollToHorizontalCategory(index).ignore();   // И в вертикальном - предварительно защитившись флагом, который   // используется в функции определяющую видимость категории   _isIgnoreCatalogScroll = true;   await verticalScrollController.animateTo(     offset - _scrollStickyOffset,     duration: scrollAnimationDuration,     curve: Curves.easeInOut,   );   _isIgnoreCatalogScroll = false; }

Горизонтальный список

Превращаем заготовку горизонтального списка в имплементацию.

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

Обязательно заворачиваем карточки категорий в виджет AutoScrollTag. Он принимает через конструктор AutoScrollController и сохраняет в его хеш-таблицу ссылку на свой BuildContext в момент построения в соответствии с индексом. Не забываем указать ему ключ ValueKey.

child: ListenableBuilder(   listenable: _controller,   builder: (     BuildContext context,     Widget? child,   ) =>       ListView.separated(     controller:         _controller.horizontalScrollController,     scrollDirection: Axis.horizontal,     padding: const EdgeInsets.symmetric(       horizontal: 8,     ),     separatorBuilder: (       BuildContext context,       int index,     ) =>         const SizedBox(       width: 8,     ),     itemCount: _controller.categories.length,     itemBuilder: (       BuildContext context,       int index,     ) {       final Category category =           _controller.categories[index];       return AutoScrollTag(         key: ValueKey(           'Category-$index-${category.id}-${category.title}',         ),         controller:             _controller.horizontalScrollController,         index: index,         child: Chips(           title: category.title,           onPressed: () =>               _controller.onPressedCategory(             index: index,           ),           isSelected:               _controller.categoryIndex == index,         ),       );     },   ), ),

Вертикальный список

Так же поступаем с вертикальным списком — имплементируем нижнюю часть экрана.

sliver: ListenableBuilder(   listenable: _controller,   builder: (     BuildContext context,     Widget? child,   ) =>       MultiSliver(     children: _controller.categories         .mapIndexed(           (             int index,             Category category,           ) =>               SliverToBoxAdapter(             child: AutoScrollTag(               key: ValueKey(                   'CategoryProduct-$index-${category.id}-${category.title}'),               controller:                   _controller.verticalScrollController,               index: index,               child: Column(                 mainAxisSize: MainAxisSize.min,                 crossAxisAlignment:                     CrossAxisAlignment.start,                 children: [                   Text(                     category.title,                     style: const TextStyle(                       color: Colors.black,                       fontSize: 32,                       fontWeight: FontWeight.bold,                     ),                   ),                   const SizedBox(                     height: 20,                   ),                   Column(                     mainAxisSize: MainAxisSize.min,                     children: List.generate(                       category.products.length,                       (                         int index,                       ) {                         final Product product =                             category.products[index];                         return Padding(                           padding: const EdgeInsets.only(                             bottom: 8,                           ),                           child: ProductCard(                             product: product,                           ),                         );                       },                     ),                   ),                   const SizedBox(                     height: 32,                   ),                 ],               ),             ),           ),         )         .toList(),   ), ),

Что в итоге

Готово. Вы великолепны!

Такой расчёт подходит для случаев, когда не нужно рассчитывать высоту всех карточек линейно-алгоритмическими формулами. А также нужно гарантировать скролл вне зависимости от небольших объемов данных и высоты разных отображаемых элементов.

Важный момент

У этого решения есть проблема. Оно отлично подходит для небольшого числа отображаемых элементов — когда мы на уровне продуктовой истории понимаем, с каким количеством сущностей имеем дело. Например, если это страница с подкатегориями большей категории продуктов, как в приложении Самокат.

Решение не подойдет для огромных или бесконечных списков. Создавая список через MultiSliver, мы заставляем фреймворк отрисовывать декларируемые элементы без рендер-оптимизации, потому что нам нужно понимать, к какой позиции виджета скроллить из полученного BuildContext, то есть сами элементы, этих категорий списка должны находится в дереве элементов.

Когда нужна подкапотная оптимизация рендеринга скролла, можно использовать стандартные фабрики виджетов —  ListView.separated, ListView.builder, SliverList.builder, SliverList.list.

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

Полный проект уже в нашем репозитории.

А вот, что получилось:

Больше полезного про Flutter — в Telegram-канале Surf Flutter Team. 

Кейсы, лучшие практики, новости и вакансии в команду Flutter Surf в одном месте. Присоединяйтесь!