CapDriveGroup
Объедините несколько View в одно целое, равномерно применяя прозрачность, вращение или другие специальные эффекты. Дочерний элемент View следует правилам расположения внешнего контейнера, а специальные эффекты применяются ко всему набору синтезированных результатов.
Пример
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Использование
- Group не задаёт раскладку: дети участвуют во внешнем контейнере. Эффекты и прозрачность применяются к собранной группе, отличаясь от отдельных opacity на пересечениях. Размеры и отступы задайте внешним Stack.
- Стабильные ID в key сохраняют соответствие View при обновлении и анимации. Индекс массива не подходит как постоянный ID при перестановке элементов.
- x/y и transform применяются после раскладки. Сдвиг ребёнка не отталкивает соседей; интервалы задают spacing и Spacer. Поворот и масштаб меняют готовый рисунок.
Свойства
children?ViewContentДочернее графическое содержимое.
Общие свойства
transform?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 (
<HStack spacing={12}>
<Group opacity={0.6} transform={{ rotation: 10 }}>
<Text fontSize={40}>78</Text>
<Symbol name="speedometer" fontSize={28} />
</Group>
<Text>km/h</Text>
</HStack>
);
}
Анимация
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYПри пропуске
Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.