MyGo 中文文档

外观

滚动视图 ​

ui.Scroll 和 ui.ScrollHorizontal 支持用滚轮、触控板、滚动条和键盘滚动 其子元素:方向键、Page Up 和 Page Down、空格、Home 和 End 会围绕焦点位置 滚动容器,或在指针下方滚动,除非获得焦点的元素占用了这些按键(文本输入 框就会如此)。ui.ScrollBoth 可以双向滚动,适用于画布或宽表格。鼠标滚轮 滚动一格时,容器会以一段简短的缓出动画平滑滑动,如同浏览器的滚动方式; 连续滚动多格会累加,直到应用滚动容器(ScrollState、ListState 的 ScrollTo、ScrollIntoView 和 ScrollToEnd,或其中某个元素的 ScrollIntoView)时接管为止;触控板跟随手指移动,就像在 Linux 上用手指 拖拽触摸屏一样;而当桌面系统要求减少动态效果时,滚轮一格会直接滚动到位。

go
ui.Scroll(c).Grow(1).Padding(16).Gap(12).Children(func() {
	for _, p := range app.posts {
		post(c, p)
	}
})

为它们指定尺寸,或让它们在父容器中伸展。对于集合的行,请使用 列表,它只构建视图中可见的行。

当采用从右到左布局时,横向滚动的容器会先显示内容的 起始处(位于右侧),ScrollState.X 从那里开始计数:0 是起点,MaxX 是 终点,与 Flutter 的偏移量一致。

保持偏移量 ​

滚动容器保持偏移量的方式与保持其他状态相同:通过它在视图中的位置或其 Key。要读取偏移量、设置它或将其保存在应用状态中,请用 TrackScroll 给容器一个 ui.ScrollState:容器从状态的 X 和 Y 开始显示其内容,在 用户滚动时写回它们,并把 MaxX 和 MaxY 设为可滚动的最大距离。 Y = 0 滚动到顶部,math.MaxFloat32 滚动到末尾;为容器显示的每个页面 各用一个 ScrollState 可以保留每页面的位置。一个跟随末尾的日志,除非 用户从末尾向上滚开:

go
if app.log.Y >= app.log.MaxY {
	app.log.Y = math.MaxFloat32
}
ui.Scroll(c).TrackScroll(&app.log).Grow(1).Children(app.lines)

ScrollTo(x, y, animation) 平滑地滚动到目标位置,采用弹簧或曲线动画 (参见动效);若在途中再次调用,会转向新的目标位置;用户 滚动会中止它,Scrolling() 会报告它是否仍在途中。当桌面系统要求减少 动态效果时,它会直接滚动到位:

go
if ui.Button(c, "Back to top").Clicked() {
	app.feed.ScrollTo(0, 0, ui.Smooth)
}

滚动到可见位置 ​

ScrollIntoView 会在该帧布局完成后,以刚好使元素可见的最小滚动量滚动 元素周围的容器,因此它在添加该元素的那一帧中就能生效:新消息,或按键 选中的条目。只在那一帧调用它,否则用户将无法把该元素滚出视野。List 尚未构建的行,通过其 ListState 滚动到可见位置。

go
if app.added {
	ui.Text(c, msg.Text).ScrollIntoView()
}

键盘焦点移动时会滚动到可见位置。带有应用提供的 TextInputClient (文本输入客户端)的元素会把其插入符(caret) 滚动到可见位置——即 BoundsForRange 所定位的地方——而不是整个文本框: 一个高度恰好等于其行数的代码编辑器,在获得焦点时会显示正在编辑的行, 而不是第一行。

滚动条 ​

内容溢出的滚动容器,在指针悬停其上时会在内容上方显示滚动条的滑块, 用户可以拖动它们;它们不占用空间。从右到左布局时,纵向滚动条位于左侧。 主题的 ScrollbarWidth 设置滚动条的宽度,Scrollbar 设置其颜色。

ScrollbarInsets 将滚动条从容器边缘向内移动,像 CSS 的 Padding 一样: 纵向滚动条从顶部内缩延伸到底部内缩,并从右侧内缩向内偏移;横向滚动条 从左侧内缩延伸到右侧内缩,并从底部内缩向上偏移。这样滚动条就能避开 浮在内容之上的元素,例如内容从其下方滚过的工具栏,与 AppKit 和 UIKit 的做法一致:

go
ui.Scroll(c).Fill().Padding(64, 16, 16).ScrollbarInsets(64, 0, 0).Children(func() { /* ... */ })
// 工具栏悬浮在顶部 64 DIP 之上。
ui.Row(c).Absolute().Top(0).Left(0).Right(0).Height(64).Children(func() { /* ... */ })

其中内部的元素(如图表)若用滚轮、触控板和捏合手势来缩放或平移,会 从容器手中接管这些输入:参见滚动与捏合。

无障碍 ​

辅助技术会看到一个滚动区域,它会滚动该区域以显示正在朗读的内容。