屏幕尺寸和安全边距变化时,按钮相对整屏的位置与相对可用区域的位置可能不同。先确定可用矩形,再应用归一化锚点和像素偏移,才能说明元素为什么在不同布局下移动。
这份练习把数据、规则和中间状态一起列出。可以先自行推演,再与过程记录逐项比较;如果结果不同,先找到第一处分歧,确认时间单位、端点归属和运算顺序。案例是一套限定模型,不把其他作品的不同实现认定为错误。
规则与输入
左右上下安全边距从屏幕边缘向内扣除;锚点是可用矩形中的零至一比例,最终参考点再加像素偏移。本例只定位参考点,不处理元素自身尺寸、拉伸或自动避免重叠。
锚点(1/4,1/2),像素偏移(12,-10) [[1040, 280, 35, 30, 0, 10], [1120, 960, 20, 5, 30, 35], [600, 640, 0, 5, 15, 35], [880, 400, 25, 0, 0, 35], [480, 680, 0, 30, 35, 40], [1280, 520, 15, 5, 15, 20], [1040, 280, 20, 10, 0, 5], [720, 360, 30, 0, 40, 15]]
逐项推演
屏幕1040×280,边距左35右30上0下10;可用尺寸975×270,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(1163/4,125)。
屏幕1120×960,边距左20右5上30下35;可用尺寸1095×895,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(1223/4,935/2)。
屏幕600×640,边距左0右5上15下35;可用尺寸595×590,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(643/4,300)。
屏幕880×400,边距左25右0上0下35;可用尺寸855×365,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(1003/4,345/2)。
屏幕480×680,边距左0右30上35下40;可用尺寸450×605,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(249/2,655/2)。
屏幕1280×520,边距左15右5上15下20;可用尺寸1260×485,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(342,495/2)。
屏幕1040×280,边距左20右10上0下5;可用尺寸1010×275,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(569/2,255/2)。
屏幕720×360,边距左30右0上40下15;可用尺寸690×305,锚点比例(1/4,1/2)加偏移(12,-10)后参考点(429/2,365/2)。
每种布局均先扣除对应边距,再计算比例位置,最后应用固定像素偏移。
复核与使用边界
用可用矩形两条边的加权平均求参考位置,与从左上角加比例行程的写法比较。缩小可用区域不一定让参考点向同一个方向移动,要看锚点比例和两侧边距。
锚点在可用区域内,不保证整个控件都在区域内;控件尺寸和自身参考点也会影响边缘。如果界面需要完整避开边界,还要把这两项纳入约束,本例不把参考点合规误认为整体合规。
复盘时建议保留输入表和中间状态,而不仅保存最终答案。改动一个条件后重新推演,再检查起点、终点、重复值和临界输入;这样能把规则本身、计算实现和显示结果分别核对,避免把一次偶然相同当成验证完成。
