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

RadialLayout

Распределите шкалы, цифры или символы по кругу. radius управляет расстоянием от центра до центра макета View, а startAngle и sweepAngle управляют диапазоном распределения.

Пример

function main() {
  return (
    <RadialLayout
      radius={70}
      startAngle={-90}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 60, 120, 180].map((value) => (
        <Text key={value}>{value}</Text>
      ))}
    </RadialLayout>
  );
}

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

  • Радиусы размещают центры детей, не внешние края. includeEnd=false делит на n частей, true на n−1. Полный круг с конечной точкой совмещает первый и последний элементы. childRotation задаёт ориентацию.
  • Углы в градусах: 0 вправо, 90 вниз, положительный sweep по часовой. startAngle по модулю 360, sweepAngle ограничен −360…360. 0 пусто, ±360 полный круг. wrap:360 только для startAngle.
  • Стабильные ID в key сохраняют соответствие View при обновлении и анимации. Индекс массива не подходит как постоянный ID при перестановке элементов.

Свойства

children?ViewContent

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

radius?number

Радиус в пунктах: radius для обеих осей, radiusX/radiusY переопределяют отдельно. Отрицательные значения становятся 0.

Пример80
radiusX?number

Радиус в пунктах: radius для обеих осей, radiusX/radiusY переопределяют отдельно. Отрицательные значения становятся 0.

Пример80
radiusY?number

Радиус в пунктах: radius для обеих осей, radiusX/radiusY переопределяют отдельно. Отрицательные значения становятся 0.

Пример80
startAngle?number

Начальный угол в градусах; при выборке приводится по модулю 360.

Пример-90
sweepAngle?number

Размах в градусах; при выборке ограничивается диапазоном -360…360. Положительное значение задаёт движение по часовой стрелке; wrap не поддерживается.

Пример360
includeEnd?boolean

Включить конечный угол в размещение. Для полного круга false предотвращает наложение концов.

Примерfalse
childRotation?"none" | "radial" | "tangent"

none сохраняет направление; radial следует радиусу; tangent добавляет 90 градусов.

Пример"none"
Общие свойства
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?RadialLayoutAnimation[]

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

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

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

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

function main() {
  return (
    <RadialLayout
      width={200}
      height={200}
      radius={76}
      startAngle={-135}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 50, 100, 150, 200].map((value) => (
        <Text key={value} fontSize={14}>
          {value}
        </Text>
      ))}
    </RadialLayout>
  );
}

Анимация

Анимация

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

При пропуске

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

СвойстваПри пропуске
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Предыдущее

Circle

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

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

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