Ask the assistant

0/400

Your question is processed by an AI service and kept to improve answers. Do not enter personal data.

Switcher

This page has not been translated into English yet. The Russian original is below.

Условный рендеринг — выбирает один дочерний элемент для отображения на основе совпадения 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 + индексный доступ