61 lines
3.5 KiB
Plaintext
61 lines
3.5 KiB
Plaintext
// flexBasis/flexMin/flexMax/flexShrink 约束同一主轴分配。
|
||
// 增长达到上限或收缩达到下限后，剩余空间/缺额重新分给其他尚可调整的项，固定项保持 60。
|
||
// 给 Row 一个有限 340x60 的期望尺寸，便于精确观察分配数值。
|
||
class Strip: Row {
|
||
// 源测量返回固定尺寸；后续排列仍使用原生 Row 的 padding/gap 与 flex 规则。
|
||
// source_layout 在该 Strip 出现的测量阶段调用，返回 MeasureResult 仍会按父传入 Constraints 钳制。
|
||
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 触顶后，多余增长转给第二项。
|
||
// 增长按钮的绑定回调，先复位首项下界/上界，再改 basis 与权重，最终布局在本次输入后的刷新中求解。
|
||
function grow(self: Actions): Unit {
|
||
self.first.flexMin = 0
|
||
self.first.flexMax = 105
|
||
// basis 提供参与分配的起始主轴尺寸，与 RectBlock 构造时自然宽度不同。
|
||
self.first.flexBasis = 100
|
||
self.second.flexBasis = 100
|
||
self.first.flex = 1
|
||
// grow 不清除 shrink 曾设的 flexShrink=1；本例 basis 总量小于可用量，走增长分支，故不影响这里的预期。
|
||
self.second.flex = 3
|
||
}
|
||
// 两项 basis=200 造成缺额，以 flexShrink*basis 分摊；首项 min=150 后第二项继续收缩到90。
|
||
// 收缩按钮回调复位增长上界并设置下界，两个 flex=0 不参与增长，但 flexShrink=1 仍允许按 basis 收缩。
|
||
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
|
||
// 权重是 flexShrink×basis，本例 basis 同为 200，首项触底后剩余缺额继续转到第二项。
|
||
self.first.flexShrink = 1
|
||
self.second.flexShrink = 1
|
||
}
|
||
}
|
||
// 自然宽20/40与basis可不同；fixed不设置权重，保持原始60宽。
|
||
first = RectBlock(20, 20, 4, "#A4C8F0")
|
||
// 两个可调对象分别用不同颜色展示，当前自然宽并不决定设置 flexBasis 后的起始分配。
|
||
second = RectBlock(40, 20, 4, "#A6D8B2")
|
||
// 未改 flex/basis/shrink 的固定项不承担本例缺额，保留 60 宽参与总宽计算。
|
||
fixed = RectBlock(60, 20, 4, "#E8C990")
|
||
actions = Actions(first, second)
|
||
grow = Button("增长：上限后重新分配")
|
||
// 注册零参源方法，由点击派发执行；下面显式 actions.grow() 才是在初次 render 前立即初始化。
|
||
grow.onClick(actions.grow)
|
||
shrink = Button("收缩：最小尺寸后重新分配")
|
||
shrink.onClick(actions.shrink)
|
||
// 先初始化增长策略再挂载，首次发布即采用105/135/60，不需等待按钮点击。
|
||
actions.grow()
|
||
// 340 总宽减左右 padding 共 20、两个 gap 共 20 和固定项 60，留给两项的主轴总量是 240。
|
||
strip = Strip(10, 10, first, second, fixed)
|
||
// 输出提示中的 105/135 或 150/90 基于 Strip 获得足够父约束的尺寸；实际几何仍由宿主约束校验。
|
||
page = Page()
|
||
page.title = "基础尺寸与边界"
|
||
page.render(Column(20, 12, Row(0, 10, grow, shrink), strip, TextBlock("增长：105 / 135 / 60；收缩：150 / 90 / 60。")))
|