50 lines
2.2 KiB
Plaintext
50 lines
2.2 KiB
Plaintext
// flexBasis/flexMin/flexMax/flexShrink 约束同一主轴分配。
|
|
// 增长达到上限或收缩达到下限后，剩余空间/缺额重新分给其他尚可调整的项，固定项保持 60。
|
|
// 给 Row 一个有限 340x60 的期望尺寸，便于精确观察分配数值。
|
|
class Strip: Row {
|
|
// 源测量返回固定尺寸；后续排列仍使用原生 Row 的 padding/gap 与 flex 规则。
|
|
function measure(self: Strip, mount: Mount, constraints: Constraints): MeasureResult {
|
|
return MeasureResult(340, 60)
|
|
}
|
|
}
|
|
// 分别持有两个可调整矩形，按钮切换增长/收缩策略，而不是手动写最终 bounds。
|
|
class Actions {
|
|
first: RectBlock
|
|
second: RectBlock
|
|
// 两项 basis=100，按1:3分增长；首项 max=105 触顶后，多余增长转给第二项。
|
|
function grow(self: Actions): Unit {
|
|
self.first.flexMin = 0
|
|
self.first.flexMax = 105
|
|
self.first.flexBasis = 100
|
|
self.second.flexBasis = 100
|
|
self.first.flex = 1
|
|
self.second.flex = 3
|
|
}
|
|
// 两项 basis=200 造成缺额，以 flexShrink*basis 分摊；首项 min=150 后第二项继续收缩到90。
|
|
function shrink(self: Actions): Unit {
|
|
self.first.flexMax = 300
|
|
self.first.flexMin = 150
|
|
self.first.flexBasis = 200
|
|
self.second.flexBasis = 200
|
|
self.first.flex = 0
|
|
self.second.flex = 0
|
|
self.first.flexShrink = 1
|
|
self.second.flexShrink = 1
|
|
}
|
|
}
|
|
// 自然宽20/40与basis可不同；fixed不设置权重，保持原始60宽。
|
|
first = RectBlock(20, 20, 4, "#A4C8F0")
|
|
second = RectBlock(40, 20, 4, "#A6D8B2")
|
|
fixed = RectBlock(60, 20, 4, "#E8C990")
|
|
actions = Actions(first, second)
|
|
grow = Button("增长：上限后重新分配")
|
|
grow.onClick(actions.grow)
|
|
shrink = Button("收缩：最小尺寸后重新分配")
|
|
shrink.onClick(actions.shrink)
|
|
// 先初始化增长策略再挂载，首次发布即采用105/135/60，不需等待按钮点击。
|
|
actions.grow()
|
|
strip = Strip(10, 10, first, second, fixed)
|
|
page = Page()
|
|
page.title = "基础尺寸与边界"
|
|
page.render(Column(20, 12, Row(0, 10, grow, shrink), strip, TextBlock("增长：105 / 135 / 60；收缩：150 / 90 / 60。")))
|