Виджет Stack позволяет дочерним виджетам накладываться друг на друга. Последний дочерний виджет остается сверху.
Иногда базовых виджетов, таких как Column и Row, недостаточно для создания сложного пользовательского интерфейса. Например, если необходимо показать текст поверх изображения — следует рассмотреть возможность использования виджета Stack.

Следующий рисунок поможет вам понять, чем виджет Stack отличается от других виджетов.

стэк 1

Вот еще один пример, демонстрирующий использование виджета Stack:

стэк 2

Добавьте стек в свой проект

Чтобы добавить виджет Stack в свой проект, выполните следующие действия:

  1. Сначала перетащите виджет Stack с вкладки Layout Elements (в панели виджетов) или добавьте его непосредственно с вкладки Widget Tree.
  2. Теперь вы можете добавить несколько CircleImage внутрь стека.
  3. Выберите любой CircleImage и перетащите его, чтобы изменить выравнивание.
стэк 3

Ниже описаны шаги по созданию пользовательского интерфейса, как показано на рисунке 2 выше, с помощью виджета Stack:

  1. Перетащите виджет Stack с вкладки Layout Elements (в панели виджетов) или добавьте его непосредственно с вкладки Widget Tree.
  2. Добавьте виджет Image и установите его ширину и высоту на inf.
  3. Добавьте виджет «Текст» и перетащите его в левый нижний угол изображения.
стэк 4

Настройка размещения

Вы можете изменить способ размещения дочерних элементов внутри виджета Stack, изменив положение конкретного дочернего виджета или изменив размещение по умолчанию.

Изменение положения дочернего виджета

Вы можете захотеть изменить положение определенного дочернего виджета в соответствии со спецификацией дизайна.

Чтобы изменить положение дочернего виджета, выполните следующие действия:

  • Выберите дочерний виджет и перетащите его, чтобы изменить выравнивание.
  • Чтобы дочерний виджет появился за границей стека, продолжайте перетаскивать виджет и поместите его на границу стека.
стэк 5

Изменение расположения по умолчанию

По умолчанию все дочерние элементы размещаются в левом верхнем углу стека. При создании сложного пользовательского интерфейса вы можете захотеть, чтобы дочерние элементы были выровнены по определенной позиции.

Чтобы изменить расположение дочерних элементов по умолчанию:

  • Выберите стек в дереве виджетов или в области холста.
  • Перейдите в редактор свойств и перейдите в раздел Свойства стека.
  • Выделите параметры Выравнивание дочерних элементов по горизонтали по умолчанию и Выравнивание дочерних элементов по вертикали по умолчанию. Вы можете настроить их с помощью ползунка или ввести значение.
  • Для Default Child Horizontal Alignment (Выравнивание дочерних элементов по горизонтали по умолчанию) значение -1 установит размещение по умолчанию влево, а значение 1 — вправо.
  • Для вертикального выравнивания дочерних элементов по умолчанию значение -1 устанавливает размещение по умолчанию сверху, а значение 1 — снизу.
стэк 6

Показать/скрыть стек

Инструкции по отображению/скрытию виджета находятся здесь.