21.02.2025 08:39
madbrains 0 23 Источник

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

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

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, поэтому есть немалая вероятность, что мы еще увидим новые сливер-веджеты во фреймворке. Но пока что на этом завершается наш обзор. Мы рассмотрели все существующие сливер-виджеты, и теперь, обладая представлением о их возможностях, вы можете выбирать оптимальные решения для своих проектов. С помощью сливеров вы получите большую гибкость в управлении прокруткой и компоновкой, делая ваши интерфейсы более интерактивными и отзывчивыми.

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