07.02.2025 06:28
madbrains 0 232 Источник

Всем привет! Двигаемся дальше в изучении сливеров, в прошлых статьях мы познакомились со сливерами-списками, посмотрели на их базовые классы и делегаты. В этой статье будем рассматривать сливеры, которые помогают управлять отступами, позиционированием и распределением пространства. Эти виджеты обеспечивают гибкость при настройке компоновки и позволяют создавать более точные и адаптивные интерфейсы.

Предыдущие материалы по теме:
Такие разные Slivers. Часть 1: обзор и применение во Flutter
Такие разные Slivers. Часть 2: базовые классы и делегаты

SliverPadding — добавляет отступы для другого сливера. 

SliverPadding(
  padding: const EdgeInsets.all(50.0),
  sliver: SomeSliver(),
),

SliverSafeArea — оборачивает дочерний сливер в достаточный padding, чтобы избежать перекрытий операционной системы 

SliverSafeArea(
  sliver: SomeSliver(),
),

SliverConstrainedCrossAxis — ограничивает размер дочернего sliver по поперечной оси. 

SliverConstrainedCrossAxis(
  maxExtent: 250,
  sliver: SomeSliver(),
),

SliverMainAxisGroup — размещает множество дочерних сливеров в линейном массиве вдоль главной оси, один за другим. То же самое делает SliverList, но только для обычных виджетов, данный сливер же работает со сливерами, которые в том числе могут быть нефиксированной высоты. Можно использовать, например, чтобы добавить закрепленный заголовок только для части контента в скролле.

SliverMainAxisGroup(
  slivers: [
    SomeSliver(),
    AnotherSliver(),
  ],
),

SliverCrossAxisGroup — размещает дочерние сливеры в массиве по поперечной оси. 

SliverCrossAxisGroup(
  slivers: [
    SomeSliver(),
    AnotherSliver(),
  ],
),

SliverCrossAxisExpanded — устанавливает flex коэффициент для распределения пространства в SliverCrossAxisGroup.

SliverCrossAxisGroup(
  slivers: [
    SliverCrossAxisExpanded(
      flex: 3,
      sliver: SomeSliver(),
    ),
    SliverCrossAxisExpanded(
      flex: 2,
      sliver: AnotherSliver(),
    ),
  ],
),

SliverToBoxAdapter — отображает один виджет, что позволяет обычным виджетам работать со сливерами. 

SliverToBoxAdapter(
  child: Container(
    color: Colors.orange,
    child: const Text('Item'),
  ),
),

SliverFillRemaining — заполняет оставшееся пространство в области просмотра. 

SliverFillRemaining(
  child: Container(
    color: orange,
    child: const Text('Item'),
  ),
),

В следующей части познакомимся со сливерами для более гибкого управления размерами и поведением элементов во время прокрутки.

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