37 lines
3.1 KiB
Plaintext
37 lines
3.1 KiB
Plaintext
// 按 flex 权重分配有限主轴空间：固定项先占自然尺寸，剩余空间按正权重划分。
|
||
// paragraph 只有一份业务内容，但在两个 Row 的 Mount 中各自按真实分配宽度测量/换行。
|
||
// 只持有首个 Row 的 filler，修改它的权重来间接改变同排文字分配。
|
||
class Actions {
|
||
// Actions 只持有首排填充块引用，不持有共享段落或第二排的固定矩形，按钮修改的对象范围因此明确。
|
||
filler: RectBlock
|
||
// 将 filler 权重恢复为 1，与 paragraph=1 近似等分可用空间。
|
||
// Button.onClick 接受绑定后的零参回调，事件系统负责调用；这里改权重，不直接给 Mount 写最终几何。
|
||
function balanced(self: Actions): Unit { self.filler.flex = 1 }
|
||
// filler 权重改为 3，paragraph 在首排获得剩余空间的四分之一，换行高度随之增加。
|
||
// 同一父 Row 内 paragraph=1、filler=3 按剩余空间分配，父容器与子上限仍可进一步限制实际宽度。
|
||
function narrow(self: Actions): Unit { self.filler.flex = 3 }
|
||
}
|
||
// 共享文字的 flex=1 是业务布局策略，具体几何与自然尺寸缓存仍属于各 Mount。
|
||
paragraph = TextBlock("GUI 和代码操控同一套 Aster 内存对象系统。对象只有一份，但每次挂载都有自己的约束和布局。这里用同一个 TextBlock 在两个容器中显示不同的换行。修改权重会重新测量文字高度，随后更新相邻布局。GUI 和代码操控同一套 Aster 内存对象系统。对象只有一份，但每次挂载都有自己的约束和布局。这里用同一个 TextBlock 在两个容器中显示不同的换行。修改权重会重新测量文字高度，随后更新相邻布局。")
|
||
// 原生 measure 取得段落自然/换行尺寸，原生 arrange 分配主轴空间，源布局驱动可为分配宽度再次测高。
|
||
paragraph.flex = 1
|
||
// 自然尺寸 20×20 不等于 flex 后最终宽度；flex=1 让这个出现参与首排剩余空间分配。
|
||
filler = RectBlock(20, 20)
|
||
filler.flex = 1
|
||
// 绑定下面两个按钮的方法时捕获同一 Actions 实例，后续点击仍更新已挂载的 filler。
|
||
actions = Actions(filler)
|
||
balanced = Button("等比例分配")
|
||
// 注册监听器而不立即执行 balanced，所以第一次布局沿用上面已经设好的初始权重。
|
||
balanced.onClick(actions.balanced)
|
||
narrow = Button("文字只占四分之一")
|
||
// 另一个按钮只选择同一实例的方法，切换策略不重新构造两排容器或共享文字。
|
||
narrow.onClick(actions.narrow)
|
||
// 首排两个可伸缩子项，次排只有文字 flex 与固定 300px 兄弟，因此首排按钮不会改次排宽度。
|
||
first = Row(10, 10, paragraph, filler)
|
||
// 第二排的段落仍是同一业务对象，兄弟是未设置 flex 的固定宽矩形，分配宽度属于第二个出现。
|
||
second = Row(10, 10, paragraph, RectBlock(300, 20))
|
||
// 同一个 Page 的根中同时包含两个段落 Mount，修改文本会影响两处，修改首排 filler 权重只改变首排约束。
|
||
page = Page()
|
||
page.title = "按权重分配与文字重排"
|
||
page.render(Column(10, 10, Row(0, 10, balanced, narrow), first, second))
|