// 按 flex 权重分配有限主轴空间：固定项先占自然尺寸，剩余空间按正权重划分。
// paragraph 只有一份业务内容，但在两个 Row 的 Mount 中各自按真实分配宽度测量/换行。
// 只持有首个 Row 的 filler，修改它的权重来间接改变同排文字分配。
class Actions {
    filler: RectBlock
    // 将 filler 权重恢复为 1，与 paragraph=1 近似等分可用空间。
    function balanced(self: Actions): Unit { self.filler.flex = 1 }
    // filler 权重改为 3，paragraph 在首排获得剩余空间的四分之一，换行高度随之增加。
    function narrow(self: Actions): Unit { self.filler.flex = 3 }
}
// 共享文字的 flex=1 是业务布局策略，具体几何与自然尺寸缓存仍属于各 Mount。
paragraph = TextBlock("GUI 和代码操控同一套 Aster 内存对象系统。对象只有一份，但每次挂载都有自己的约束和布局。这里用同一个 TextBlock 在两个容器中显示不同的换行。修改权重会重新测量文字高度，随后更新相邻布局。GUI 和代码操控同一套 Aster 内存对象系统。对象只有一份，但每次挂载都有自己的约束和布局。这里用同一个 TextBlock 在两个容器中显示不同的换行。修改权重会重新测量文字高度，随后更新相邻布局。")
paragraph.flex = 1
filler = RectBlock(20, 20)
filler.flex = 1
actions = Actions(filler)
balanced = Button("等比例分配")
balanced.onClick(actions.balanced)
narrow = Button("文字只占四分之一")
narrow.onClick(actions.narrow)
// 首排两个可伸缩子项，次排只有文字 flex 与固定 300px 兄弟，因此首排按钮不会改次排宽度。
first = Row(10, 10, paragraph, filler)
second = Row(10, 10, paragraph, RectBlock(300, 20))
page = Page()
page.title = "按权重分配与文字重排"
page.render(Column(10, 10, Row(0, 10, balanced, narrow), first, second))