Перейти к основному содержимому

StickyHeader (Закреплённый заголовок)

Виджет StickyHeader — это особый тип виджета, который позволяет верхней части прокручиваемого списка “прилипать” к верхней части экрана, оставаясь видимой, пока пользователь прокручивает остальное содержимое.
Таким образом, заголовок остаётся зафиксированным, обеспечивая постоянный контекст или элементы навигации.

Например, в приложениях с большим объёмом данных (например, таблицы), закреплённые заголовки позволяют колонкам оставаться видимыми при прокрутке, повышая удобство и читаемость интерфейса.

Пример работы StickyHeader

Виджет StickyHeader состоит из двух основных секций:

  • StickyHeader Header (Заголовок): часть, которая остаётся закреплённой сверху при прокрутке. Обычно используется для отображения заголовков, названий разделов или важной информации.
  • StickyHeader Content (Содержимое): прокручиваемая часть (например, ListView или GridView), где располагается основной контент. Пользователь может прокручивать её, в то время как заголовок остаётся на месте.
Обратите внимание

Чтобы виджет StickyHeader работал корректно, его необходимо размещать внутри прокручиваемого виджета (например, Column или ListView) и сделать этот контейнер Primary scrollable widget.
Если используете Column, убедитесь, что она действительно прокручивается, иначе эффект закрепления не будет работать.

img_1.png

Структура StickyHeader

Добавление виджета StickyHeader​

Рассмотрим пример, в котором StickyHeader используется как замена AppBar, и в верхней части закрепляется строка поиска.

Использование строки поиска как StickyHeader

Шаги по созданию:​

  1. Убедитесь, что на странице есть виджет Column. Если его нет — добавьте. Сделайте его scrollable и Primary.
  2. Добавьте StickyHeader из вкладки Base Elements.
  3. В секции StickyHeader Header поместите элемент, который должен оставаться закреплённым (в нашем примере — строка поиска).
  4. В секции StickyHeader Content добавьте ListView > Container для отображения списка пользователей.
  5. Настройте отображение списка пользователей в ListView через запрос данных.

Другой пример​

Когда нужно отобразить длинный список с категориями (например, список контактов, разделённый по буквам A, B, C...), можно использовать StickyHeader, чтобы закрепить заголовок текущей категории при прокрутке.

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

Список контактов с использованием StickyHeader

Шаги по реализации:​

  1. Подготовьте список букв (A–Z). Можно хранить его в переменной AppState.
    img_2.png

  2. Подготовьте список контактов.
    img_3.png

  3. Добавьте ListView > StickyHeader:

    • В ListView создайте динамические дочерние элементы из переменной, содержащей буквы.
    • Внутри StickyHeader Header разместите виджет, отображающий текущую букву.
  1. В секции StickyHeader Content добавьте ListView > Container, чтобы отобразить список контактов для каждой буквы.
    • Создайте динамические дочерние элементы на основе переменной с контактами.
    • При генерации отфильтруйте список по первой букве имени, используя Inline Function.
    • Отобразите информацию о контакте (например, имя) внутри интерфейса.