31.01.2025 05:54
madbrains 0 166 Источник

Продолжаем серию статей о сливерах, в первой части были рассмотрены сливеры-списки: различные вариации SliverList и SliverGrid. В этом материале погрузимся чуть глубже и сосредоточимся на базовых классах и делегатах, которые определяют поведение и структуру сливеров-списков.

Первая часть "Такие разные Slivers: обзор и применение во Flutter" тут.

SliverMultiBoxAdaptorWidget —  абстрактный класс для сливеров, у которых множество элементов. Помогает подклассам создавать свои дочерние элементы лениво, используя SliverChildDelegate.
Наследует абстрактный класс SliverWithKeepAliveWidget, который позволяет отмечать элементы как нуждающиеся в сохранении состояния, даже если находятся в списках с отложенной инициализацией.
Наследниками класса являются SliverGrid, SliverList и другие их вариации.

SliverChildDelegate — абстрактный класс для делегатов, которые поставляют дочерние элементы для сливеров-списков. Есть два основных подкласса:

SliverChildListDelegate — делегат, который предоставляет дочерние элементы для сливеров, используя явный список. Подходит для небольших списков с фиксированными данными.

SliverList(
    delegate: SliverChildListDelegate(items),
),

SliverChildBuilderDelegate — делегат, который предоставляет дочерние элементы с помощью обратного вызова builder. Это позволяет создавать только те элементы, которые необходимы в данный момент, чтобы избежать создания бóльшего количества дочерних элементов, чем видно в окне просмотра, при этом делегат обеспечивает повторное использование виджетов — очень полезно, когда в списке большой набор данных. 

SliverList(
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(items[index]);
    },
    childCount: items.length,
  ),
),

SliverGridDelegate — абстрактный класс для делегатов, управляющих размещением элементов в сетке для SliverGrid. Тут также два основных подкласса:
SliverGridDelegateWithFixedCrossAxisCount — создает SliverGrid с фиксированным количеством элементов по поперечной оси.

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  delegate: SliverChildListDelegate(items),
),

SliverGridDelegateWithMaxCrossAxisExtent — определяет максимальный размер элементов по поперечной оси, полезен для адаптивных сеток. 

SliverGrid(
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 200.0),
  delegate: SliverChildListDelegate(items),
),

У SliverGridDelegate есть также собственные параметры, которые можно использовать в SliverGridDelegateWithFixedCrossAxisCount и SliverGridDelegateWithMaxCrossAxisExtent:

  • childAspectRatio — соотношение сторон элементов внутри сетки, задаваемое как отношение ширины к высоте (по умолчанию = 1.0, то есть элементы квадратные);

  • crossAxisSpacing — расстояние между элементами по поперечной оси;

  • mainAxisSpacing — расстояние между элементами вдоль главной оси;

  • mainAxisExtent — задает фиксированный размер элементов по главной оси (не используется одновременно с childAspectRatio).

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    childAspectRatio: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  delegate: SliverChildListDelegate(items),
),

На этом закончим со сливерами-списками. В следующей статье посмотрим на сливеры, которые помогают с позиционированием и компоновкой.

Комментарии (0)