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

RepeatedLayout

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

Пример

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

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

  • children — один узор, period — повторение. value совпадает с anchor: рост value двигает узор обратно; offset добавляет пункты. both повторяет по двум осям, {x,y} задаёт их отдельно. Окно всегда обрезает.
  • x/y и transform применяются после раскладки. Сдвиг ребёнка не отталкивает соседей; интервалы задают spacing и Spacer. Поворот и масштаб меняют готовый рисунок.

Свойства

children?ViewContent

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

axis?"horizontal" | "vertical" | "both"

Повтор horizontal, vertical или both; both создаёт сетку копий.

Пример"horizontal"
period?RepeatAxisValue

Расстояние между копиями в пунктах; x/y задают оси отдельно.

Пример360
value?RepeatAxisValue

Координата содержимого на anchor. Рост значения сдвигает копии обратно; это не скорость.

Пример$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

Доля видимой области: 0 начало, 0.5 центр, 1 конец.

Пример0.5
offset?RepeatAxisValue

Дополнительное смещение в пунктах после совмещения value с anchor.

Пример0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

Выравнивание наложенных дочерних View по девяти позициям краёв и центра.

Пример"topLeading"
Общие свойства
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
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 (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

Анимация

Анимация

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

При пропуске

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

СвойстваПри пропуске
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

Анимация

Symbol

Предыдущее

RadialLayout

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

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

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