Контейнер

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

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

Свойства контейнера

Свойства Контейнера можно настроить для кастомизации внешнего вида и макета виджета Контейнер. Вот краткое объяснение каждого:

Ограничение размера

Иногда вы не задаёте высоту и ширину контейнера явно и позволяете ему быть размером с дочерний виджет. Если вы так делаете, вы можете столкнуться с проблемами макета, где виджеты могут стать слишком большими или слишком маленькими на разных устройствах, что приводит к плохому пользовательскому опыту. Чтобы преодолеть это, вы можете ограничить размер контейнера, указав Min W, Min H, Max W и Max H.

Например, в адаптивном дизайне вы можете захотеть, чтобы кнопка росла вместе с размером экрана, но не превышала определённую ширину. Установив эти свойства, вы можете обеспечить, чтобы кнопка была как минимум определённого размера для удобства использования, но не становилась слишком большой на больших экранах.

• Min W (Minimum Width) & Min H (Minimum Height): Эти свойства задают минимальные размеры, до которых Контейнер может сжиматься, в пикселях или процентах.

• Max W (Maximum Width) & Max H (Maximum Height): Эти свойства задают максимальные размеры, до которых Контейнер может расширяться, в пикселях или процентах.

Обрезка содержимого

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

Свойства тени

Свойства тени позволяют добавить и настроить эффект тени для виджета Контейнер. Вот краткое объяснение каждого свойства:

• Shadow Color: Цвет тени, обычно указывается в шестнадцатеричном формате, включая значение альфа-канала для прозрачности, например #33000000. Вы можете выбрать из цветовой темы, использовать инструмент выбора цвета или ввести шестнадцатеричный код.

• Blur: Определяет радиус размытия тени. Более высокое значение создаёт более рассеянную тень, в то время как более низкое значение делает тень острее и чётче.

• Spread: Управляет радиусом расширения тени. Увеличение этого значения расширит область, покрываемую тенью, делая её больше.

• Offset X & Offset Y: Эти свойства задают горизонтальное (X) и вертикальное (Y) смещение тени относительно виджета. Offset X сдвигает тень горизонтально, а Offset Y — вертикально. Положительные значения перемещают тень вправо и вниз соответственно, а отрицательные — влево и вверх.

Вот краткая демонстрация свойства тени в Контейнере:

Свойства градиента

Свойства градиента позволяют создать и настроить эффект градиента для виджета Контейнер. Вот обзор каждого свойства:

• Angle (Degrees): Задаёт ориентацию градиента, указывая угол в градусах. Угол в 0 градусов создаёт горизонтальный градиент, а 90 градусов — вертикальный.

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

• Add Color: Эта опция позволяет добавить дополнительные цвета в градиент, дополнительно настраивая эффект путём регулировки точек перехода и выбора из цветовой темы, инструмента выбора цвета или шестнадцатеричных кодов.

• Transition Point: Эти значения определяют, где каждый цвет начинает переход в градиенте. Точки перехода задаются как доля от общего расстояния градиента:

На приведённом выше примере,

• Точка перехода для Цвета 1 установлена на 0, что означает начало с самого начала градиента.
• Точка перехода для Цвета 2 — 0.5, что указывает на начало перехода этого цвета на полпути.
• Точка перехода для Цвета 3 — 1, что размещает начало перехода этого цвета в конце градиента.

Свойства фонового изображения

Свойства фонового изображения предоставляют опции для установки изображения в качестве фона виджета Контейнер.

к сведению

Подробное руководство по настройке общих свойств изображения см. в соответствующем разделе здесь.

Свойства дочернего элемента

• Child Alignment: Это позволяет указать выравнивание дочерних виджетов внутри Контейнера. Сетка указывает возможные позиции (центр, верх, низ, лево, право и т. д.), и вы можете точно настроить выравнивание с помощью значений X и Y, которые сдвигают дочерний виджет горизонтально и вертикально внутри Контейнера.

Неявная анимация

Это свойство позволяет использовать неявные анимации для изменений свойств Контейнера (например, размера или цвета). Это делает переходы между изменениями свойств более плавными и визуально привлекательными.

Вот пример изменения ширины и цвета Контейнера без использования Неявной анимации.

Теперь мы включаем Неявную анимацию для этого Контейнера и видим разницу:

Свойства Неявной анимации следующие:

• Animation Curve: Указывает, как анимация прогрессирует со временем. Варианты: Ease In, Ease in Out, Ease Out, Bounce, Linear, Elastic.

• Duration (ms): Задаёт длительность анимации в миллисекундах. Более короткая длительность делает анимацию быстрее, а более длинная — медленнее.

Область безопасности

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

Чтобы включить область безопасности, перейдите в панель свойств и включите переключатель Safe Area.

Смотрите видеоурок

Если вы предпочитаете смотреть видеоурок, вот руководство для вас: