Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

Switcher

Условный рендеринг — выбирает один дочерний элемент для отображения на основе совпадения id: со значением переменной.

Тип: multi-child

Switcher $pageId
  Column id:email
    Text "Войдите"
  Column id:register
    Text "Зарегистрируйтесь"

Механизм работы

Switcher принимает первый позиционный параметр (значение для сравнения) и ищет среди дочерних элементов тот, у которого id: совпадает с этим значением. Если совпадений нет — отображается первый дочерний элемент (fallback).

Switcher $variable
  FirstChild        ← отображается если ни одно id не совпало (default)
  Element id:value1 ← отображается если $variable == "value1"
  Element id:value2 ← отображается если $variable == "value2"

Параметры:

Параметр	Тип	Описание
(позиционный 0)	любой	Значение для сравнения с `id:` дочерних элементов

Примеры

Переключение страниц

State @pageId:email

Switcher $pageId
  // Страница входа
  Column id:email spacing:82 mainAxisAlignment:center
    Text "Войдите"
    TextField name:email placeholder:"example@email.com"
    Button onPressed:"form:submit" text:"Получить код"

  // Страница регистрации
  Column id:register spacing:82 mainAxisAlignment:center
    Text "Зарегистрируйтесь"
    TextField name:name placeholder:"Имя"
    TextField name:email placeholder:"example@email.com"
    Button onPressed:"form:submit" text:"Получить код"

Fallback (первый элемент = default)

State @status:initial

Switcher $status
  // Default — показывается при status=initial или любом неизвестном значении
  SizedBox
  // Показывается при status=loading
  Text id:loading "Загрузка..."
  // Показывается при status=error
  Text id:error "Произошла ошибка"

Switcher внутри itemBuilder скролла

Используйте Switcher внутри itemBuilder , когда элементы скролла структурно разные (разные виджеты на разных позициях):

ReeelScroll itemCount:7
  #config direction:horizontal spacing:24
  @Macros id:itemBuilder index:0 isFocused:false
    Switcher $index
      // Default — обычная карточка
      $CategoryChip "Категория"
      // Первый элемент — кнопка фильтров (структурно другой)
      DecoratedBox id:0
        #decoration color:$primaryColor
          #borderRadius circular 60
        Center
          Row spacing:12
            Icon filter_list size:24
            Text "Фильтры"
      $CategoryChip id:1 "Фильмы"
      $CategoryChip id:2 "Сериалы"

Bad practices

1. Именованный параметр вместо позиционного

// BAD — value: это именованный параметр, builder читает позиционный params.get(0)
Switcher value:$status
  Text id:ok "OK"

// GOOD — позиционный параметр
Switcher $status
  Text id:ok "OK"

2. Switcher для однотипных данных

Если все элементы одного типа и отличаются только данными — не нужен Switcher. Используйте #data + доступ по индексу (см. ReeelScroll ).

// BAD — дублирование шаблона для каждого элемента
@Macros id:itemBuilder index:0 isFocused:false
  Switcher $index
    $Card id:0 title:"Первый" badge:"4K"
    $Card id:1 title:"Второй" badge:"HDR"
    $Card id:2 title:"Третий" badge:"Новое"

// GOOD — данные отдельно, шаблон один
#data
  :# title:"Первый" badge:"4K"
  :# title:"Второй" badge:"HDR"
  :# title:"Третий" badge:"Новое"
@Macros id:itemBuilder index:0 isFocused:false
  $Card title:{data[index]['title']} badge:{data[index]['badge']}

Адаптивная вёрстка через `$theme.sizeClass`

Switcher — штатный способ менять разметку по размеру экрана: драйвером служит ambient-переменная $theme.sizeClass ( compact / medium / expanded , резолвится один раз из ширины вью). Дети — с id: = имя класса; нет совпадения → первый ребёнок.

// Навигация: колонка-бургер на мобиле, строка на десктопе
Switcher $theme.sizeClass
  Column id:compact
    $MobileNav
  Row id:expanded
    $DesktopNav

Пороги размер-классов задаются в Brand Kit ( breakpoints , дефолты compact:0, medium:600, expanded:1240 ). Платформенная привязка живёт в рендерере: на Flutter Switcher пересобирается при смене класса, на вебе компилируется в @media -переключение (все ветки в DOM). Для отзывчивых отступов без смены разметки используйте per-class токены: spacing:$theme.spacing.<name> .

Best practices

Позиционный параметр : Switcher $variable (не value:$variable )
Дочерние с id: : каждый вариант — дочерний элемент с id:value
Первый дочерний = default : если ни один id: не совпал, рендерится первый элемент
Только для структурно разных элементов : если элементы одного типа с разными данными — используйте #data + индексный доступ