CapDrive
Руководство

HStack

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

Пример

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" />
      <Text fontSize={32}>78</Text>
    </HStack>
  );
}

Использование

  • alignment выравнивает по вертикали или текстовой базе внутри строки, не сдвигает всю строку по горизонтали. Spacer разводит края; firstTextBaseline подходит для числа и единицы разного размера.
  • Числовые размеры — в пунктах. auto измеряет содержимое, fill использует выделенное место. Сначала задайте контейнер: fill и длинный текст не расширяют фиксированного родителя.
  • x/y и transform применяются после раскладки. Сдвиг ребёнка не отталкивает соседей; интервалы задают spacing и Spacer. Поворот и масштаб меняют готовый рисунок.

Свойства

children?ViewContent

Дочернее графическое содержимое.

spacing?number

Расстояние между дочерними представлениями в пунктах.

Пример8
alignment?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"

Вертикальное выравнивание в строке: top, center, bottom или первая/последняя базовая линия текста.

Пример"center"
Общие свойства
width?number | "auto" | "fill"

Ширина в пунктах, автоматический размер или заполнение родителя.

Пример100
height?number | "auto" | "fill"

Высота в пунктах, автоматический размер или заполнение родителя.

Пример80
padding?number

Внутренний отступ содержимого в пунктах.

Пример0
x?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0
y?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0
transform?ViewTransform

Преобразование всего View без изменения раскладки. Сдвиг в пунктах, поворот/наклон в градусах, масштаб 1 без изменений, якоря 0–1.

Пример{rotation: 0}
background?Paint

Цвет или градиент фона; clear означает прозрачность.

Пример"clear"
opacity?number

Непрозрачность всего View: 0 прозрачно, 1 непрозрачно.

Пример1
cornerRadius?number

Радиус скругления в пунктах.

Пример0
clipped?boolean

Обрезать рисунок за границами View.

Примерfalse
clip?"rectangle" | "ellipse"

Форма обрезки rectangle или ellipse; Material также принимает false для отключения.

Пример"rectangle"
mask?View | null

View альфа-маски. По центру без влияния на компоновку; null отключает маску.

Пример<Circle width="fill" height="fill" background="white"/>
zIndex?number

Порядок среди соседей; большее значение выводится впереди.

Пример0
blur?number

Радиус размытия в пунктах; 0 отключает его.

Пример4
innerShadow?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 скрывает её.

Пример0
shadowRadius?number

Радиус размытия внешней тени в пунктах.

Пример4
shadowX?number

Смещение тени в пунктах: x вправо, y вниз.

Пример0
shadowY?number

Смещение тени в пунктах: x вправо, y вниз.

Пример2
animations?Animation[]

Анимация изменения свойства. duration/delay в секундах; from/to — границы; repeat/autoreverse — повторы, wrap — период.

Пример[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Стабильный идентификатор среди соседних элементов.

Практический пример

function main() {
  return (
    <HStack width={260} alignment="firstTextBaseline" spacing={4}>
      <Text fontSize={48}>78</Text>
      <Text fontSize={14}>km/h</Text>
      <Spacer minLength={12} />
      <Symbol name="speedometer" fontSize={24} />
    </HStack>
  );
}

Анимация

Анимация

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

При пропуске

Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.

СвойстваПри пропуске
spacing8
alignment"center"

Spacer

VStack

VStack

Предыдущее

ZStack

Следующий шаг

На этой странице

ПримерИспользованиеСвойстваПрактический примерАнимацияПри пропускеСвязанные API