Такие разные Slivers. Часть 5: аналоги обычных виджетов

Мы подошли к заключительной части нашего цикла о сливер-виджетах во Flutter. За прошедшие статьи мы разобрали множество различных типов сливеров, от списков и сеток до гибких решений для управления размером и поведением элементов. В этой финальной статье мы познакомимся со сливер-виджетами, которые являются аналогами обычных (box-based) виджетов, выполняя схожие функции, но для работы в прокручиваемых структурах. Эти элементы расширяют возможности управления видимостью, анимациями и декорациями, предоставляя дополнительную гибкость при создании сложных интерфейсов.

Предыдущие материалы по теме:

• Такие разные Slivers. Часть 1: обзор и применение во Flutter

• Такие разные Slivers. Часть 2: базовые классы и делегаты

• Такие разные Slivers. Часть 3: работа с пространством

• Такие разные Slivers. Часть 4: гибкое управление элементами

SliverOpacity — изменяет непрозрачность своего дочернего sliver элемента.

 SliverOpacity(   opacity: 0.8,   sliver: SomeSliver(), )

SliverAnimatedOpacity — анимированная версия SliverOpacity, изменяет непрозрачность дочернего элемента за заданный промежуток времени.

SliverAnimatedOpacity(   opacity: _visible ? 1.0 : 0.0,   duration: Duration(seconds: 1),   sliver: SomeSliver(), )

SliverFadeTransition — также анимирует непрозрачность сливера, но уже принимает объект Animation.

SliverFadeTransition(   opacity: _animation,   sliver: SomeSliver(), )

SliverIgnorePointer — делает дочерний сливер невидимым во время hit-testing-а, то есть игнорирует нажатия.

SliverIgnorePointer(   sliver: SomeSliver(), )

SliverOffstage — размещает sliver так, как если бы он был в дереве, но ничего не отрисовывал, нажатие невозможно и не занимает никакого места в родительском элементе.

SliverOffstage(   sliver: SomeSliver(), )

SliverVisibility — показывает или скрывает дочерний сливер.

SliverVisibility(   visible: true,   sliver: SomeSliver(), )

У сливера есть дополнительные необязательные поля, которые могут быть полезны:

• replacementSliver: сливер, который отображается, когда visible: false

• maintainState: сохранять состояние скрытого сливера

• maintainAnimation: продолжать анимацию скрытого сливера

• maintainSize: сохранять размер скрытого сливера

• maintainSemantics: сохранять семантику скрытого сливера

• maintainInteractivity: сохранять интерактивность скрытого сливера

DecoratedSliver — добавляет декорации дочернему сливеру, использует для этого класс BoxDecoration, который также используется в DecoratedBox.

DecoratedSliver(   decoration: BoxDecoration(     border: Border.all(color: Colors.black, width: 5),     borderRadius: BorderRadius.circular(32),     gradient: LinearGradient(       colors: [Colors.orange, Colors.purple],       begin: Alignment.topLeft,       end: Alignment.bottomRight,     ),   ),   sliver: SomeSliver(), )

Последний добавленный сливер, SliverFloatingHeader, появился в совсем недавней версии Flutter — 3.27.0, поэтому есть немалая вероятность, что мы еще увидим новые сливер-веджеты во фреймворке. Но пока что на этом завершается наш обзор. Мы рассмотрели все существующие сливер-виджеты, и теперь, обладая представлением о их возможностях, вы можете выбирать оптимальные решения для своих проектов. С помощью сливеров вы получите большую гибкость в управлении прокруткой и компоновкой, делая ваши интерфейсы более интерактивными и отзывчивыми.