Недавно от вас был запрос разобрать SliverPersistentHeader. Но прежде чем углубиться в него, давайте вспомним, что такое slivers и каких видов они бывают.
Этот пост я решила разделить на две части:
✔️в этой — обзор и базовая теория
✔️в следующей — разберем на практике, как менять прозрачность и расположение элементов при скролле
Начнем!
Что такое Sliver?
Sliver — это часть прокручиваемой области с гибко настраиваемым поведением.
В отличие от стандартных виджетов вроде ListView, GridView или Column, которые создают обычный прокручиваемый список, Sliver-виджеты работают в связке с CustomScrollView.
Благодаря этому можно собрать кастомную прокрутку: закрепленные заголовки, анимированные списки или коллапсирующий AppBar.
Об этом как раз писали в посте.
Чтобы наполнить CustomScrollView элементами, можно использовать разные виды Sliver. Например:
▪️SliverAppBar: AppBar с поддержкой скролла и анимаций. Он может фиксироваться, а также изменять свою высоту и внешний вид при прокрутке
▪️SliverToBoxAdapter: позволяет разместить обычный виджет внутри CustomScrollView
▪️SliverFillRemaining: заполняет все оставшееся пространство в области просмотра
▪️SliverList: создает список элементов
▪️SliverFixedExtentList: список с фиксированной высотой элементов. Он более производителен, чем SliverList, когда все элементы имеют одинаковый размер
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildListDelegate(items),
)
▪️SliverPrototypeExtentList: высота задается прототипом (удобно, когда элементы одинаковой высоты, но зависят от контента)
▪️SliverVariedExtentList: позволяет элементам иметь разные размеры
▪️SliverReorderableList: список, в котором можно менять порядок элементов
▪️SliverAnimatedList: список с анимацией вставки/удаления
▪️SliverFillViewport: каждый элемент заполняет всю область просмотра. Размер элементов можно регулировать с помощью viewportFraction
▪️SliverGrid: отображает элементы в виде сетки
▪️SliverAnimatedGrid: SliverGrid с анимацией вставки и удаления
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
delegate: SliverChildListDelegate(items),
)
Управление расположением и отступами
Для управления расположением Sliver-виджетов используются:
▫️SliverPadding: добавляет отступы для другого Sliver-виджета
SliverPadding(
padding: const EdgeInsets.all(50),
sliver: SomeSliver(),
)
▫️SliverSafeArea: добавляет отступы от системных областей UI
▫️SliverConstrainedCrossAxis: ограничивает размер дочернего Sliver-виджета по поперечной оси
▫️SliverMainAxisGroup: позволяет объединить несколько Sliver-виджетов подряд. В отличие от SliverList, этот виджет подходит для элементов разной высоты
SliverMainAxisGroup(
slivers: [Sliver1(), Sliver2()],
)
▫️SliverCrossAxisExpanded: распределяет пространство по flex-коэффициенту
Делегаты
Говоря о Sliver-списках, нельзя не упомянуть о делегатах, которые определяют, как и когда создавать элементы:
✔️SliverChildListDelegate: используется для фиксированного списка виджетов
✔️SliverChildBuilderDelegate: лениво создает элементы через builder (для длинных списков)
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text(items[index])),
childCount: items.length,
),
)
✔️SliverGridDelegateWithFixedCrossAxisCount: сетка с фиксированным количеством колонок
✔️SliverGridDelegateWithMaxCrossAxisExtent: адаптивная сетка с максимальной шириной элемента
Продолжение в комментариях👇