Skip to content

网格视图 ​

ui.GridView 以网格显示各项,如同照片类 App 的图库和 Finder 的图标视图:列数取能排下至少所要求宽度的项的最多列,均分剩余宽度,行高一致,显示时才构建,因此百万项的网格也和小的网格一样快。Gap 设置项间距。

go
app.photos.Selected = &app.photo
ui.GridView(c, &app.photos, len(photos), 140, 120, func(i int) {
	ui.Image(c, thumbs[i]).Fit(ui.Contain).Grow(1)
	ui.Text(c, photos[i].Name).SingleLine()
}).Grow(1)

网格状态 ​

GridState 保持网格的位置并规定项如何选择,如同 ListState 之于行(也可以传 nil):

  • Selected 允许点击选择一项;网格拥有键盘焦点时,两个方向的方向键也可选择,还有 Home、End 和 Enter(Submitted)。
  • Selection 允许用户通过 Key 选择多项:Cmd+点击添加或移除一项,Shift+点击以及配合 Shift 的方向键选中从最后选中项开始的若干项,Cmd+A 全选。
  • Label 返回某项的文本:键入其开头字母即可选中它,辅助技术把它读作项的名称。
  • Reorder 允许用户把项拖到别的位置,如同列表的行:参见拖放。

无障碍 ​

辅助技术把网格读作一个项的列表,每项都说明它是所有项中的第几项,无论是否已构建。