跳到正文
QuickGUI

浮层与对话框

应用内样式的内容用 QuickGUI 浮层；选文件和系统提示用系统对话框。

#Popover

Popover 包含触发器和弹出内容。side 只是偏好；如果会溢出，位置会翻转。

func PopoverExample() *ui.Element {
	popover := ui.NewPopover().Side("bottom").SideOffset(8)
	return popover.Root().Children(
		popover.Trigger().Child("Account"),
		popover.Positioner().Child(
			popover.Popup().Width(240).Padding(16).Children(
				popover.Title().Child("Account"),
				popover.Description().Child("Manage your account settings."),
				popover.Close().Child("Done"),
			),
		),
	)
}

#Dialog

在 Portal 下构建模态内容。Title 和 Description 为无障碍功能命名对话框。确认操作用 AlertDialog。

func DialogExample() *ui.Element {
	dialog := ui.NewDialog()
	return dialog.Root().Children(
		dialog.Trigger().Child("Open dialog"),
		dialog.Portal().Children(
			dialog.Backdrop(),
			dialog.Popup().Padding(20).Width(360).Children(
				dialog.Title().Child("Confirm action"),
				dialog.Description().Child("Review the details before continuing."),
				dialog.Close().Child("Cancel"),
			),
		),
	)
}

#系统浮窗

SystemPopover 打开原生子窗口，可以延伸到所属窗口边缘之外。

func SystemPopoverExample() *ui.Element {
	popover := ui.NewSystemPopover()
	return popover.Root().Children(
		popover.Trigger().Child("Account"),
		popover.Content(ui.PopoverContentProps{
			Width:     240,
			Height:    120,
			Placement: "bottom-start",
		}).Child("Account settings"),
	)
}

#原生对话框

在渲染时捕获父窗口，再把它传给请求。取消打开面板会把 Canceled 设为 true。

func OpenFolderButton() *ui.Element {
	window := native.CurrentWindow()
	return ui.Button().Child("Open folder").OnClick(func() {
		native.ShowOpenDialog(
			native.OpenDialogOptions{
				Window:     window,
				Title:      "Open folder",
				Properties: []string{"openDirectory"},
			},
			func(result native.OpenDialogResult, err error) {
				if err == nil && !result.Canceled {
					fmt.Println(result.FilePaths)
				}
			},
		)
	})
}