27 lines
1.9 KiB
Plaintext
27 lines
1.9 KiB
Plaintext
// 按 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))
|