StickyHeader

StickyHeader удерживает верхнюю часть прокручиваемого списка на месте: содержимое уезжает вверх, шапка остаётся. Так пользователь не теряет контекст — например, в большой таблице всегда видит названия колонок.

Открыть интерактивное демозагрузится с demo.arcade.software

Виджет состоит из двух частей — StickyHeader Header и StickyHeader Content.

• StickyHeader Header — то, что залипает вверху: заголовок, название раздела, поисковая строка.
• StickyHeader Content — прокручиваемое содержимое: ListView, GridView или другой виджет с основным контентом.

Как добавить

Соберём замену AppBar: поисковая строка, которая остаётся вверху при прокрутке списка.

Результат выглядит так:

Открыть интерактивное демозагрузится с demo.arcade.software

Порядок такой:

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

Список контактов по буквам

Второй типичный случай — длинный список с разделами: контакты, сгруппированные по первой букве. Буква остаётся вверху, пока идут её контакты.

Идея в том, чтобы сгенерировать по StickyHeader на каждую букву, а внутрь каждого положить контакты, которые с неё начинаются.

Готовый результат:

Открыть интерактивное демозагрузится с demo.arcade.software

Порядок такой:

1. Подготовьте список букв от A до Z — например, в переменной AppState.

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

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

   1. В ListView сгенерируйте динамических потомков из переменной с буквами.
   2. В секции StickyHeader выведите текущую букву.

4. В секцию StickyHeader Content положите ListView с Container внутри — это и будут контакты.

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