CapDriveVStack
Расположите субтитры View сверху вниз, подходящее для вертикального сочетания заголовков, основных цифр и единиц измерения. spacing устанавливает расстояние между соседями, а alignment устанавливает выравнивание по левому и правому краю этого столбца.
Пример
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Использование
- alignment выравнивает столбец по горизонтали: leading слева, trailing справа. Spacer даёт гибкое вертикальное место; spacing действует между соседями.
- Числовые размеры — в пунктах. auto измеряет содержимое, fill использует выделенное место. Сначала задайте контейнер: fill и длинный текст не расширяют фиксированного родителя.
- x/y и transform применяются после раскладки. Сдвиг ребёнка не отталкивает соседей; интервалы задают spacing и Spacer. Поворот и масштаб меняют готовый рисунок.
Свойства
children?ViewContentДочернее графическое содержимое.
spacing?numberРасстояние между дочерними представлениями в пунктах.
8alignment?"leading" | "center" | "trailing"Горизонтальное выравнивание в столбце: leading, center или trailing.
"center"Общие свойства
width?number | "auto" | "fill"Ширина в пунктах, автоматический размер или заполнение родителя.
100height?number | "auto" | "fill"Высота в пунктах, автоматический размер или заполнение родителя.
80padding?numberВнутренний отступ содержимого в пунктах.
0x?numberВизуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.
0y?numberВизуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.
0transform?ViewTransformПреобразование всего View без изменения раскладки. Сдвиг в пунктах, поворот/наклон в градусах, масштаб 1 без изменений, якоря 0–1.
{rotation: 0}background?PaintЦвет или градиент фона; clear означает прозрачность.
"clear"opacity?numberНепрозрачность всего View: 0 прозрачно, 1 непрозрачно.
1cornerRadius?numberРадиус скругления в пунктах.
0clipped?booleanОбрезать рисунок за границами View.
falseclip?"rectangle" | "ellipse"Форма обрезки rectangle или ellipse; Material также принимает false для отключения.
"rectangle"mask?View | nullView альфа-маски. По центру без влияния на компоновку; null отключает маску.
<Circle width="fill" height="fill" background="white"/>zIndex?numberПорядок среди соседей; большее значение выводится впереди.
0blur?numberРадиус размытия в пунктах; 0 отключает его.
4innerShadow?DrawingEffectЦвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectЦвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorЦвет внешней тени.
HDR("black")shadowOpacity?numberНепрозрачность тени 0–1; 0 скрывает её.
0shadowRadius?numberРадиус размытия внешней тени в пунктах.
4shadowX?numberСмещение тени в пунктах: x вправо, y вниз.
0shadowY?numberСмещение тени в пунктах: x вправо, y вниз.
2animations?Animation[]Анимация изменения свойства. duration/delay в секундах; from/to — границы; repeat/autoreverse — повторы, wrap — период.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberСтабильный идентификатор среди соседних элементов.
Практический пример
function main() {
return (
<VStack width={180} height={140} alignment="leading" spacing={8}>
<Text fontSize={14}>Speed</Text>
<Spacer minLength={8} />
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
</VStack>
);
}
Анимация
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYПри пропуске
Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.