CapDrive
Guia de uso

RadialLayout

Distribua escalas, números ou símbolos em torno de um círculo. radius controla a distância do centro ao centro do layout de View, e startAngle e sweepAngle controlam o intervalo de distribuição.

Exemplo

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

Uso

  • Os raios posicionam centros dos filhos, não bordas externas. includeEnd=false divide em n partes, true em n−1. No círculo completo as pontas coincidem. childRotation define a orientação.
  • Ângulos em graus: 0 à direita, 90 abaixo, sweep positivo horário. startAngle módulo 360; sweepAngle limitado a −360…360. Zero não desenha, ±360 fecha. wrap:360 só em startAngle.
  • Use IDs estáveis em key para preservar identidade e animações. Índices não são identidades permanentes adequadas quando a ordem dos itens muda.

Propriedades

children?ViewContent

Conteúdo de desenho filho.

radius?number

Raio em pontos: radius vale para ambos os eixos; radiusX/radiusY substituem cada um. Negativos viram 0.

Exemplo80
radiusX?number

Raio em pontos: radius vale para ambos os eixos; radiusX/radiusY substituem cada um. Negativos viram 0.

Exemplo80
radiusY?number

Raio em pontos: radius vale para ambos os eixos; radiusX/radiusY substituem cada um. Negativos viram 0.

Exemplo80
startAngle?number

Ângulo inicial em graus, normalizado módulo 360 na amostragem.

Exemplo-90
sweepAngle?number

Varredura em graus, limitada a -360…360 na amostragem. Valores positivos seguem o sentido horário; wrap não é compatível.

Exemplo360
includeEnd?boolean

Inclui o ângulo final na distribuição. No círculo completo, false evita sobreposição das pontas.

Exemplofalse
childRotation?"none" | "radial" | "tangent"

none mantém a orientação; radial segue o raio; tangent adiciona 90 graus.

Exemplo"none"
Propriedades comuns
width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo100
height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo80
padding?number

Espaçamento interno do conteúdo em pontos.

Exemplo0
x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}
background?Paint

Cor ou gradiente de fundo; clear é transparente.

Exemplo"clear"
opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1
cornerRadius?number

Raio dos cantos em pontos.

Exemplo0
clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"
mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

Exemplo<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0
blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4
innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Cor da sombra externa.

ExemploHDR("black")
shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0
shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4
shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0
shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2
animations?RadialLayoutAnimation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

Exemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identidade estável entre elementos irmãos.

Exemplo prático

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>
  );
}

Animação

Animação

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

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

PropriedadesQuando omitido
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Anterior

Circle

Próximo passo

Nesta página

ExemploUsoPropriedadesExemplo práticoAnimaçãoQuando omitidoAPIs relacionadas