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

用法说明

半径决定子 View 中心的位置，不是整个容器的外尺寸。includeEnd=false 将范围均分为 n 份；true 分为 n−1 份，适合非整圈的两端刻度。整圈包含终点会让首尾重合；childRotation 决定子 View 是否跟随圆周方向。
角度单位为度：0 在右侧，90 在下方，正 sweep 顺时针。startAngle 按 360 归一化，sweepAngle 保留方向并限制在 −360…360；0 不画，±360 为整圈。startAngle 动画可用 wrap:360 走最近路径，sweepAngle 不支持 wrap。
数组中的 key 应来自稳定的数据标识。保持 key 才能让更新和动画对应同一个 View；数据会重排时，不要把数组索引当作永久标识。

属性

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"

子 View 朝向：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

同级 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

本页内容