41 lines
2.7 KiB
Plaintext
41 lines
2.7 KiB
Plaintext
// 滚动轴策略影响可滚动方向与内容测量约束：vertical 限宽并允许长高，horizontal 允许横向展开。
|
|
// 同一 paragraph 出现两次，文字内容共享，换行/偏移/范围在各 Mount 中独立。
|
|
// 通过具体出现位置的 Mount 操作偏移；ScrollBlock.axis 则是对象级策略，可影响其所有出现位置。
|
|
class Actions {
|
|
vertical: ScrollBlock
|
|
horizontal: ScrollBlock
|
|
// 只对 vertical 第一个 Mount 累加纵偏移，运行时按当前范围夹取。
|
|
function down(self: Actions): Unit { self.vertical.mounts().at(0).scrollBy(0, 60) }
|
|
// 只对 horizontal 第一个 Mount 累加横偏移，禁止轴仍保持零。
|
|
function right(self: Actions): Unit { self.horizontal.mounts().at(0).scrollBy(60, 0) }
|
|
// 分别把两个出现位置移回原点，不修改共享段落文字。
|
|
function reset(self: Actions): Unit {
|
|
self.vertical.mounts().at(0).scrollTo(0, 0)
|
|
self.horizontal.mounts().at(0).scrollTo(0, 0)
|
|
}
|
|
// 把左对象策略改为双轴，下一次求解重新计算约束和范围。
|
|
function both(self: Actions): Unit { self.vertical.axis = "both" }
|
|
}
|
|
paragraph = TextBlock("这里展示的是同一个 TextBlock。左侧只允许纵向滚动，文字会按照这个 Mount 的实际视口宽度换行；右侧只允许横向滚动，文字保留横向展开。对象的文字和业务状态只有一份，每次展示的约束、几何和滚动位置分别保存。修改滚动轴也会重新测量受影响内容，并将已经不再允许的偏移夹回零。布局传播持续到受影响部分稳定，不会按固定跳数丢弃后续更新。这里展示的是同一个 TextBlock，两个视图可以拥有不同的换行结果。")
|
|
// 纵向区域padding后内容宽为244，长文字按此有限宽换行。
|
|
vertical = ScrollBlock(260, 140, paragraph)
|
|
vertical.padding = 8
|
|
vertical.axis = "vertical"
|
|
// 横向区域沿滚动轴允许内容自然展开，所以同一文字可以比左侧更宽、更矮。
|
|
horizontal = ScrollBlock(260, 140, paragraph)
|
|
horizontal.padding = 8
|
|
horizontal.axis = "horizontal"
|
|
// 绑定四个零参数按钮回调；最终把两视图与控制区放在普通 Column/Row 中。
|
|
actions = Actions(vertical, horizontal)
|
|
down = Button("向下滚动")
|
|
down.onClick(actions.down)
|
|
right = Button("向右滚动")
|
|
right.onClick(actions.right)
|
|
reset = Button("回到起点")
|
|
reset.onClick(actions.reset)
|
|
both = Button("左侧恢复双轴")
|
|
both.onClick(actions.both)
|
|
page = Page()
|
|
page.title = "滚动轴"
|
|
page.render(Column(24, 16, TextBlock("同一个对象，不同的滚动轴", 2), Row(0, 24, Column(0, 8, TextBlock("vertical"), vertical), Column(0, 8, TextBlock("horizontal"), horizontal)), Row(0, 12, down, right, reset, both)))
|