布局与尺寸

布局组件决定子内容怎样排列，通用属性决定大小、位置、裁切和基础效果。坐标原点在父区域左上角，X 向右、Y 向下。

组件速查

组件	用途	常用属性
Group	在同一区域组织多个子节点，适合局部坐标绘图	width、height、x、y
HStack	横向排列	spacing、alignment
VStack	纵向排列	spacing、alignment
ZStack	叠放内容	alignment
Spacer	留出弹性空间	width、height
RadialLayout	沿圆周或椭圆分布子节点	radius、startAngle、sweepAngle
RepeatedLayout	重复一个周期的内容，并对齐指定位置	axis、period、value、anchor、offset

通用尺寸与位置

属性	值	说明
width / height	0…16384 的数字、"auto"、"fill"	明确尺寸、内容测量或填充父区域
padding	数字	内容内边距
x / y	数字	父区域中的布局位置
zIndex	数字	兄弟节点之间的前后顺序
opacity	通常 0…1	整个节点的透明度
clipped	布尔值	裁切超出矩形区域的内容
cornerRadius	数字	圆角
accessibilityLabel	字符串	为绘图提供有意义的辅助说明

x/y 是布局位置。需要位移、旋转、缩放、斜切或指定视觉锚点时，使用 Transform，不要给普通组件添加 rotation 等不支持的属性。

横排与竖排

function main() {
  return <VStack spacing={12} padding={18}>
    <Text fontSize={14} color={$env.accent}>实时速度</Text>
    <HStack spacing={6} alignment="bottom">
      <Text fontSize={56} color={$env.foreground}>78</Text>
      <Text fontSize={12} color={$env.foreground}>km/h</Text>
    </HStack>
  </VStack>;
}

HStack 的交叉方向可以使用 top、center、bottom；VStack 可以使用 leading、center、trailing。给文字明确宽度与 alignment，有助于做对齐的多列信息。

使用 CardContent 的正文尺寸

CardContent 已经处理标题和推荐边距，正文不要再无条件重复加同一份边距。需要精确绘图时，使用 renderer 提供的 metrics，详见卡片容器。

圆周布局 RadialLayout

属性	说明
radius	通用半径
radiusX / radiusY	椭圆的横向与纵向半径
startAngle	起始角度，0° 向右
sweepAngle	展开的角度范围
rotatesChildren	子节点是否跟随角度旋转；默认保持直立

用 Array.map() 产生刻度或方位文字，为每项设置稳定 key。组件没有单独的 Ticks 标签。

周期布局 RepeatedLayout

RepeatedLayout 的每个子节点描述一个周期中的位置。它把内容坐标 value 对齐到视口长度乘以 anchor、再加上 offset 的位置。

视口中的对齐位置 = 视口长度 × anchor + offset

属性	值 / 默认	说明
axis	horizontal / vertical / both	重复方向，默认横向
period	正数，默认 360	一个周期的逻辑点长度
value	数字，默认 0	当前对齐的内容坐标
anchor	0…1，默认 0.5	视口中的相对锚点
offset	数字，默认 0	在锚点基础上增加的点偏移

例如宽 320 点、anchor={0.5}、offset={10}、value={90}，会把内容坐标 90 对齐到视口的 170 点位置。

一个方位角对应一个点时，使用 period={360}、value={heading}，并给 value 动画设置 wrap: 360。两个点对应一度时，要把 period、value 与 wrap 同时乘以 2。

组件按需绘制可见副本，并裁切视口外内容。它不暴露 velocity、unitSize、reverse、gap 等额外接口，也不能重复原生地图。完整用例见循环罗盘刻度。