// 源视觉协议的最小组合：measure 决定尺寸，arrange 决定子项位置，Metrics 是被两者读取的业务模型。
// 运行时在只读求解中跟踪这些读取，事件修改模型后重新布局；布局方法不能直接改业务字段。
// 保存宽度与左偏移；两字段只在事件回调中修改。
class Metrics {
    width: Number
    left: Number
    // 同时改变测量和排列依赖，整帧需收敛后一起发布新尺寸/位置。
    function expand(self: Metrics, event: Event): Unit {
        self.width = 260
        self.left = 68
    }
}
// 复用原生矩形载荷，仅覆盖尺寸策略；同一 rect 放在不同父容器可得到不同测量。
class MeasuredRect: RectBlock {
    // 首次测量前结构 Mount 链接已建立，因此可从 parent.block 读取当前出现位置的父策略。
    // 此阶段还不能查询最终 bounds，返回值使用 MeasureResult 名义类型。
    function measure(self: MeasuredRect, mount: Mount, constraints: Constraints): MeasureResult {
        parent = mount.parent()
        return MeasureResult(parent.block.metrics.width, 60)
    }
}
// 在原生排列结果上改第一个子槽 x，其他子项仍用 Column 的堆叠规则。
class OffsetColumn: Column {
    metrics: Metrics
    // Arrangement 里的 x 是当前排列使用的坐标；读取 metrics.left 成为排列依赖。
    function arrange(self: OffsetColumn, mount: Mount, geometry: Bounds): Arrangement {
        positions = Column.arrange(self, mount, geometry)
        positions.children.at(0).x = self.metrics.left
        return positions
    }
}
// 将原生参数与源字段传给具体子类，button 事件更新模型，Page.render 建立完整展示关系。
metrics = Metrics(200, 44)
rect = MeasuredRect(80, 20, 0, "#526AC7")
button = Button("更新布局")
root = OffsetColumn(24, 16, rect, TextBlock("尺寸来自源码 measure，位置来自源码 arrange"), button, metrics)
connection = button.on("click", metrics.expand)
page = Page()
page.render(root)