Files
endorphin-tessera-gui/examples/scroll.endor
T

45 lines
2.6 KiB
Plaintext

// 同一 ScrollBlock 在两个原生窗口中展示:内容业务对象共享,滚动偏移按 Mount 独立保存。
// 滚动只改变投影/裁剪,不复制业务计数;被裁剪内容不能通过原始矩形接受点击。
// 保留一个源 paint 委托,检验源命令与原生命令应用相同滚动裁剪。
class Painted: RectBlock {
// 使用当前 geometry 交给原生基类;外层滚动变换/clip 由展示流程统一组合。
function paint(self: Painted, mount: Mount, geometry: Bounds): DisplayList {
// source_paint 为当前出现调用此覆盖;只返回基类新命令,不把滚动偏移写回共享矩形坐标。
return RectBlock.paint(self,mount,geometry)
}
}
// 三个按钮复用同一个 Action,任意可见按钮点击都递增同一 count。
class Actions {
// 三个按钮连接同一 Actions,count 是共享业务状态;每个 ScrollBlock 出现的偏移不保存在这里。
count: Object
// 签名接受 Event,业务逻辑只需修改计数,不直接处理滚动位置。
// 原生指针点击先经过滚动裁剪命中,再由事件分发调用此方法;event 不承担滚动状态存储。
function click(self: Actions, event: Event): Unit { self.count.increment() }
}
count = ui.state(0)
actions = Actions(count)
first = Button("顶部按钮")
middle = Button("中间按钮")
last = Button("底部按钮")
firstConnection = first.on("click",actions.click)
// 三个连接都在创建树时注册一次,第二窗口复用对象不会额外注册或导致一次点击重复计数。
middleConnection = middle.on("click",actions.click)
lastConnection = last.on("click",actions.click)
// 高内容夹有三个按钮与矩形,使固定320x180 scroller产生可观察的横纵滚动范围。
body = Column(12,12,first,Painted(520,180,8,"#DCE8FF"),middle,RectBlock(520,180,8,"#E3EFE5"),last)
scroller = ScrollBlock(320,180,body)
// body 自然内容大于固定视口,宿主为各 Mount 计算范围;同一 scroller 不需要克隆 body 来独立滚动。
root = Column(24,16,TextBlock("同一 Block,两处 Mount 独立滚动"),ui.textOf(count,"value"),scroller)
page = Page()
page.title = "滚动示例"
page.render(root)
// 另一窗口复用 root/scroller;它们的第二个 Mount 偏移与主窗口第一个 Mount 无关。
other = Window()
other.setTitle("Scroll Secondary")
second = Page()
second.title = "独立滚动位置"
second.open(other)
// 先指定副窗口归属再 render,使这份 root 的新出现进入 other,而不是新建另一份业务根。
second.render(root)
ui.window().setTitle("Scroll Primary")