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

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

стик 1

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

  • Заголовок StickyHeader: Этот раздел содержит виджет, который остается неподвижным в верхней части при прокрутке. Обычно он используется для отображения заголовков, названий или важной информации, которая должна оставаться видимой все время.
  • StickyHeader Содержимое: Этот раздел содержит прокручиваемый виджет, например ListView или GridView, в котором размещается основное содержимое. Он позволяет пользователям прокручивать содержимое, в то время как заголовок остается на месте.
Для того чтобы виджет StickyHeader работал, необходимо добавить его внутрь прокручиваемого виджета, например Колонки или Список, и сделать его основным прокручиваемым виджетом. Примечание: При добавлении виджета внутри Column убедитесь, что столбец является прокручиваемым. Это позволит добиться желаемого поведения, при котором заголовок будет оставаться вверху, а содержимое прокручиваться.
стик 2

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

Давайте посмотрим, как можно использовать виджет StickyHeader в качестве замены AppBar, построив пример, содержащий строку поиска в качестве «липкого» заголовка.

Вот как это выглядит:

стик 3

Ниже приведены шаги по созданию такого примера:

  1. Во-первых, убедитесь, что на странице есть виджет Столбец. Если нет, то добавьте его. Кроме того, сделайте виджет Столбец прокручиваемым и первичным.
  2. Добавьте виджет StickyHeader с вкладки Base Elements.
  3. Внутри заголовка StickyHeader добавьте виджет, который должен оставаться вверху при прокрутке. В данном примере это строка поиска.
  4. Внутри содержимого StickyHeader добавьте виджеты Список> Container для отображения списка пользователей.
  5. Запросите и отобразите список пользователей в Список. Как это сделать, смотрите здесь.

Видео:https://www.loom.com/share/fb1aa4fcb11240ce95f5e4539ee0c224?sid=f940a3db-e632-453b-94d1-d9a36b46557b

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

При отображении длинного списка с категоризированными разделами, например, списка контактов с алфавитными разделами (A, B, C…), можно использовать виджет StickyHeader, чтобы заголовки разделов (например, буквы) оставались видимыми при прокрутке списка контактов пользователем.

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

Вот как это выглядит в готовом виде:

Стик 4

Ниже приведены шаги по созданию такого примера:

Стик 5

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

Стик 6

Добавьте виджеты Список> StickyHeader.

  1. В Список сгенерируйте динамические дочерние элементы из переменной, в которой хранятся буквы.
  2. Внутри секции StickyHeader Header добавьте виджет для отображения текущей буквы.

Видео:https://www.loom.com/share/39bb5fc9068f4a759a4b0d6fd62e3f16?sid=6f20ac9d-52d2-40ff-8a46-faba45e2da6b

Теперь внутри секции StickyHeader Content добавьте Список с контейнером внутри для отображения списка подходящих контактов.

  1. В этом Список сгенерируйте динамические дочерние элементы из переменной, содержащей все контакты. Но при этом отфильтруйте список и извлеките только подходящие контакты с помощью выражения Code.
  2. Теперь в пользовательском интерфейсе можно отобразить подробную информацию о контакте, например его имя.

Видео:https://www.loom.com/share/990913b5d2ce4ae9b3884519d661ad5b?sid=5df505d6-3b55-4117-8441-eea22786d9d4