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 用で sweepAngle には使えません。
配列の key には安定したデータ ID を使い、更新とアニメーションで同じ 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

レイアウトを変えず全体を変形。移動はポイント、回転・傾きは度、倍率 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

兄弟 View の重なり順。大きい値ほど手前。

例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

省略時の動作

表は実装で確認した省略時の動作です。プロパティ例は既定値ではありません。固定結果には明示指定し、環境に依存する寸法やテーマ色を定数と思わないでください。

プロパティ	省略時の動作
`radius`	`80`
`startAngle`	`-90`
`sweepAngle`	`360`
`includeEnd`	`false`
`childRotation`	`"none"`

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

Circle

Arc

このページの内容

RadialLayout

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

関連 API

Circle

Arc

このページの内容