Select(选择器)

ui.Select 创建一个下拉框,从一组字符串中选择一个到 *string:点击它, 或在它拥有键盘焦点时按 Enter、空格、上或下方向键,会在其下方打开它的选项, 方向键、Home 和 End 在选项间移动,Enter、空格或点击选择一个;Escape 关闭 它们。Changed 上报新的选择。

ui.Select(c, &app.plan, []string{"Free", "Pro", "Team"}).Label("Plan")

当下方没有空间时,弹出列表显示在选择器上方,并在关闭时把焦点交还给选择器。 当选项多于窗口能容纳时,它的高度与可用空间相同,选项可以滚动。

对于可通过键入过滤的长列表,使用组合框;对于一次显示的少数 选项,使用单选按钮。

无外观

ui.SelectBase 是一个没有外观的选择器,选择任何可比较类型的值:一个 Trigger 打开一个由 Item 组成的 Popup,方向键高亮它们(Highlighted), Enter 选择。Highlight 把高亮移到某个选项,正如你自己的选择器可能在用户 键入其首字母时所做:

sel := ui.SelectBase(c, &app.size)
sel.Trigger.Gap(6).Padding(6, 10).Radius(8).Border(1, t.Border).Children(func() {
	ui.Text(c, app.size)
	ui.Icon(c, chevron)
})
sel.Popup(func(panel ui.Element) {
	panel.Margin(4, 0, 0, 0).Padding(4).Radius(10).Background(t.Background).Border(1, t.Border)
	for _, size := range sizes {
		item := sel.Item(size).Padding(6, 10).Radius(6)
		if item.Highlighted() {
			item.Background(t.Accent).TextColor(t.AccentText)
		}
		item.Children(func() { ui.Text(c, size) })
	}
})

参见自定义控件。

无障碍

辅助技术看到的是一个弹出按钮,其值就是所选,由其 Label 命名;并且在它 打开时,看到它的各个选项,跟随方向键所在的项。