锚点布局¶

SOUI的锚点布局是一种高度灵活的布局方式,它通过指定控件相对于父窗口或兄弟窗口的位置来实现布局。

概述¶

锚点布局是SOUI中最基本和强大的布局方式
通过 pos 属性来指定控件的位置和大小
支持相对于父窗口、相对于兄弟窗口的位置定位
支持百分比定位、中心点定位等多种定位方式
可以和其他布局方式混合使用

布局属性¶

pos 属性¶

pos 属性是锚点布局中最重要的属性,它可以指定 4 个值或 2 个值:

4 个值时,分别代表控件的 left、top、right、bottom
2 个值时,代表控件的 x、y,需要配合其他属性使用

pos 支持以下特殊标记:

标记	说明
\|	相对于父窗口的中心,如 \|-10 表示父窗口中心向左偏移 10 像素
%	相对于父窗口的百分比位置,如 %40 表示父窗口 40% 位置
[	相对于前一兄弟窗口,用于 X 时参考其 right,用于 Y 时参考其 bottom
]	相对于后一兄弟窗口,用于 X 时参考其 left,用于 Y 时参考其 top
{	相对于前一兄弟窗口,用于 X 时参考其 left,用于 Y 时参考其 top
}	相对于后一兄弟窗口,用于 X 时参考其 right,用于 Y 时参考其 bottom
@	指定控件的大小,只能用于 width/height,如 @100 表示宽/高为 100

示例:

<!-- 占满整个父窗口 -->
<window pos="0,0,-0,-0"/>

<!-- 距离父窗口四边均缩进10像素 -->  
<window pos="10,10,-10,-10"/>

<!-- 宽高分别为150,30的按钮 -->
<button pos="10,150,@150,@30">button1</button>

<!-- 相对前一兄弟窗口右边5像素 -->
<window pos="[5,0,@100,@30"/>

size/width/height 属性¶

用于指定控件的大小:

<!-- 使用size指定宽高 -->
<window size="100,30"/> 

<!-- 使用width/height分别指定 -->
<window width="100" height="30"/>

支持的值类型:

full: 与父窗口客户区大小相等
-1: 根据内容自动计算大小
非负整数: 直接指定大小

offset/pos2type 属性¶

用于实现控件的偏移定位:

<!-- 向左上偏移一个窗口大小单位 -->
<window offset="-1,-1"/>

使用场景¶

锚点布局适用于:

需要精确控制控件位置和大小的场景
窗口需要自适应调整大小的场景
控件之间有依赖位置关系的场景
需要百分比定位的场景

最佳实践¶

对于固定大小的布局,可以使用绝对坐标
对于自适应布局,推荐使用:
百分比定位
相对兄弟窗口定位
中心点定位
合理使用 size/width/height:
固定大小使用具体数值
内容自适应使用 -1
撑满父容器使用 full
注意避免布局循环引用
使用 [,],{,} 这些相对定位时要注意引用关系
最好保持单向引用