Skip to content

侧边栏 ​

ui.Sidebar 是一个源列表(source list),如同 Finder 和 Mail 的侧边栏: 带图标的条目,分节存放,节标题可隐藏和显示其条目;选中某个条目时将其 ID 写入一个 *string。当条目放不下时会滚动。请为它指定宽度:

go
ui.Sidebar(c, &app.mailbox, func() {
	ui.SidebarSection(c, "Mailboxes", &app.mailboxesShown, func() {
		ui.SidebarItem(c, "inbox", inboxIcon, "Inbox").Children(func() {
			ui.Badge(c, fmt.Sprint(app.unread))
		})
		ui.SidebarItem(c, "sent", sentIcon, "Sent")
	})
	ui.SidebarSection(c, "Tags", nil, func() {
		ui.SidebarItem(c, "work", nil, "Work")
	})
}).Width(220)
  • ui.SidebarItem 选择其 ID,在图标后显示其标签,图标传 nil 表示无图标; 可用 Children 向其添加内容,例如徽标。
  • ui.SidebarSection 在其 *bool 为 true 时,把其函数构建的条目收纳在 一个标题之下:点击标题可显示或隐藏条目,其箭头同样如此,箭头会在指针 悬停于标题上时出现。*bool 为 nil 时该节保持展开。

选择 ​

点击可以选择一个条目;当侧边栏拥有焦点时,Up、Down、Home、End 以及条目 首字母都可以在条目之间选择,Tab 则会离开侧边栏,因为它只是一个停靠点。 Changed 会报告新的选择。当侧边栏拥有焦点时,选中的条目以强调色显示, 否则以灰色显示,与 AppKit 一致。

配合路由,即在状态中放一个 *ui.Router 时,条目的 ID 就是路径,新的选择会推入对应的页面:

go
page := app.router.Path()
if ui.Sidebar(c, &page, func() {
	ui.SidebarItem(c, "/notes", nil, "Notes")
	ui.SidebarItem(c, "/files", nil, "Files")
}).Width(220).Changed() {
	app.router.Push(page)
}

无障碍 ​

辅助技术会看到一棵树:各节的标题是可打开和关闭的条目,其下收纳着各自的 条目;当侧边栏拥有焦点时,选中的条目即拥有焦点。