外观
原生 UI
窗口可以显示一个由 MyGo 自行绘制的用户界面,而不是网页。你用 Go 和 ui 包编写它:没有 HTML、没有 JavaScript、没有前端构建,窗口也不会启动 webview,因此它能立即打开并占用很少的内存。MyGo 在 GPU 上绘制它,在 macOS 上使用 Metal,在 Windows 上使用 Direct3D 11,在 Linux 上使用 OpenGL。
go
package main
import (
"fmt"
"log"
"github.com/egoist/mygo"
"github.com/egoist/mygo/ui"
)
// counter 是应用的状态。
type counter struct{ n int }
// view 根据状态构建窗口的界面,每帧都会调用。
func (app *counter) view(c *ui.Context) {
ui.Column(c).Fill().Center().Gap(12).Children(func() {
ui.Text(c, fmt.Sprint(app.n)).FontSize(40).Bold()
if ui.PrimaryButton(c, "Increment").Clicked() {
app.n++
}
})
}
func main() {
app := &counter{}
mygo.App.WhenReady(func() {
mygo.NewWindow(mygo.WindowOptions{
Title: "Counter",
Width: 320,
Height: 240,
Content: ui.View(app.view),
})
})
if err := mygo.App.Run(); err != nil {
log.Fatal(err)
}
}阅读示例的约定。 这些指南中的示例都是 counter.view 这类视图的一部分:c 是视图的 *ui.Context,app 是它的接收者,即保存状态的你自己类型的值。像 app.volume 这样的字段或 app.save() 这样的方法,都是你在该类型上声明的,正如 counter 声明了 n;视图中有更多说明。
mygo init -template native my-app 会创建一个原生 UI 项目(参见 CLI)。计数器示例包含一个视图测试,图库示例展示了各种控件和布局。
同一个应用可以同时拥有两类窗口。原生 UI 适合工具、设置、检查器和实用程序,以及必须瞬间启动的应用;网页适合丰富的文档、已有的 Web 代码,以及任何需要浏览器独有能力的内容。屏幕阅读器等辅助技术读取原生 UI 的方式与读取其他应用相同(参见无障碍)。
指南
- 视图:构建生命周期、事件查询与回调、键(Key),以及从其他 goroutine 修改状态。
- 布局:行与列、尺寸、间距、对齐与定位。
- 文本:文本及其样式、富文本、句中的链接,以及字体。
- 样式与主题:背景、边框、阴影与渐变,以及跟随桌面的主题。
- 输入:指针、键盘焦点、快捷键、输入法、拖入的文件,以及接管每个按键的控件。
- 拖放:在窗口内拖动的值,以及通过拖动重排的行。
- 页面与导航:带历史的页面路由、布局、过渡,以及前进与后退。
- 覆盖层:对话框、弹出面板和窗口上层所共有的东西:焦点、Escape 键,以及它们背后的内容。
- 无障碍:屏幕阅读器看到的内容、元素的命名、角色、描述与播报。
- 从右到左:为阿拉伯语和希伯来语从右向左布局的界面、逻辑边缘,以及哪些内容会镜像翻转。
- 语言:窗口的语言与区域格式、按其书写的数字和日期,以及控件自身的字符串。
- 绘制与动画:在元素上绘制、文字排版,以及平滑趋向目标值的数值。
- 着色器:用 Go 语法编写的着色器在 GPU 上计算像素,应用向其传入数值和图像。
- 过渡:随布局变化而平滑移动、缩放、变色的元素,以及它们的出现和消失。
- 动效:保持速度的弹簧、曲线、延迟、被指针抛出的值、关键帧、在同一个播放头上播放多个补间的时间线,以及判断它们何时结束。
- 变换:任意元素的视觉平移、缩放与旋转,指针、文本输入和无障碍都会随之跟随。
- 自定义控件:所有控件所基于的无外观控件,以及你自己编写的控件。
- 使用原生 UI 的窗口:窗口选项、由视图绘制的标题栏、内容缩放,以及活力效果。
- 测试:在没有窗口的情况下运行视图,快得像单元测试一样。
- 检查器:在内容旁边显示窗口的元素、它们的盒子与样式,以及每帧的耗时。
- 渲染:MyGo 如何绘制,在 GPU 还是 CPU 上。
- 浏览器:在网页中运行同一个应用,编译为 WebAssembly 并用 WebGL 2 绘制。
- 迁移:元素值、持久句柄、焦点绑定与源码迁移。
- 性能:实测的帧开销与驻留内存。
动作
- 按钮:按压式按钮,普通样式或以强调色呈现。
- 链接:打开 URL 或路由中某个页面的文本。
- 菜单按钮:在其下方打开菜单的按钮,可以是系统菜单,也可以是 MyGo 以主题外观在窗口内绘制的菜单。
- 上下文菜单:右键时为任意元素打开的系统菜单,或 MyGo 以主题外观在窗口内绘制的菜单。
- 切换按钮:按下后保持按下状态的按钮,以及组合成一组的切换按钮。
- 分段控件:在若干视图之间选择其一的分段控件。
- 工具栏:沿窗口排列的一行控件,放不下的会收入菜单。
选择
- 复选框:复选框,以及管理一组其他复选框的全选复选框。
- 开关:开启和关闭某项设置的开关。
- 单选按钮:在一组中选择一个值的单选按钮。
- 下拉选择:从列表中选择一项的下拉框。
- 滑块:在范围内设定值的滑块,可带可不带步长。
- 范围滑块:两个旋钮,分别设定下限和上限。
- 步进器:用箭头按步长增减数值。
- 评分:用星标设定评分。
文本输入
- 文本输入:单行或多行文本,支持选择、撤销、剪贴板和输入法。
- 文本输入原语:应用自有的文本、原生输入组合与查询,以及为自定义控件保留的文字几何信息。
- 数字输入:范围内的数字,可键入或步进调节。
- 搜索框:用于搜索的输入框,按 Escape 清空。
- 组合框:从列表中选择一项的输入框,键入时会过滤。
- 自动补全:根据已输入内容提供建议的文本输入。
- 标记输入框:以标签(chip)形式呈现的字符串列表,如标签或收件人。
- 可编辑文本:就地重命名的文本,如 Finder 中的文件名。
- 查找栏:查找文本的工具栏,显示匹配数量和下一个/上一个。
- 富文本编辑器:带格式的富文本,支持链接、标题、列表、任务和图像,具备文字处理软件的快捷键与"格式"菜单、富文本复制粘贴,以及 Markdown。
代码
文档
- Markdown:CommonMark 和 GitHub 的 Markdown,既可呈现完整文档,也可流式显示语言模型的回复,可选择并以文本或 Markdown 形式复制。
日期与颜色
集合
- 列表:数量与高度不限的行,只构建可见的部分。
- 表格:以列组织的行,用户可排序、调整列宽和移动列。
- 树:可展开与收起的条目,在其所属条目内部构建。
- 大纲:任意规模的树,以列表或表格呈现。
- 网格视图:在任意规模的网格中排列条目,如照片库。
容器
- 滚动视图:滚动其子元素的容器。
- 网格:以列和行排列子元素,如同 CSS grid 的布局。
- 分栏视图:两个面板,中间有用户可拖动的分隔条。
- 可折叠内容:由标签控制显示与隐藏的内容。
- 手风琴:上下堆叠、可展开收起的区块。
- 表单:带标签的控件,含说明与错误信息。
- 网页视图:窗口中的网页,位于其后绘制的原生 UI(如菜单和对话框)之下。
导航
对话框与消息
- 对话框:显示在变暗窗口之上的对话框。
- 警告对话框:就重要事项提出的问题,带有按钮。
- 弹出面板:位于元素下方的面板。
- 工具提示:指针停留在元素上或键盘焦点移到其上时显示的提示。
- 提示条:靠近窗口底部的简短消息,可附带操作。
状态
图表
- 图表:无外观的标度、坐标轴与图形元素,可用于柱状图、折线图、面积图、堆叠图和环形图,以及可由指针和键盘移动的选区。