文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

GoUI:一个非常简单的 GUI 框架

2024-12-10 15:52

关注

[[344583]]

以前,我曾将 Ebiten 图形库用于 Go,以便与孩子们一起编写一些游戏。但是,对于一般的“应用程序”开发(即需要“小部件 widgets”,例如按钮,菜单等),Ebiten 并非真的适合。因此,我一直在寻找可以使用的 Go UI 库。然而大多数都使用 cgo,但我真的希望我的应用程序是纯 Go。这纯粹是个人喜好,我不知道使用 cgo 而不是纯 Go 会有什么影响。如果我要使用 cgo,我认为首选的 UI 库肯定是 Fyne[1]。Fyne 看起来是一个非常全面的框架,如果您不介意 cgo,我绝对会建议你看看看 Fyne。

还有其他一些库,但没有吸引我。他们说你永远不应该编写自己的安全性代码,并且我也相信你不应该编写自己的 UI 库。但是我忽略了这个建议...

因此,我写了一个 GoUI[2] !!

这纯粹是那些“抓痒”的项目之一。虽然现在还很早,但 UI 库的基本知识(由 Ebiten 进行实际渲染)正在慢慢融合。在详细介绍下面细节之前,我想先说明一下,我认为程序在 CLI 达到了顶峰。其次,我不是 UI 编程人员……写这些是我个人的兴趣。

GoUI 的基本思想是两种类型的图形元素。一个是可以包含其他面板或小部件的面板(Panel)。另一个是小部件,它是基本的 UI 元素(按钮,文本输入等)。我们目前使用的面板类型有 HPanel(水平添加)和 VPanel(我让你猜)。从技术上讲,我们确实有其他面板,例如工具栏,但这实际上只是 HPanel,需要一点点定制工作。总体而言,如果我可以结合其他现有面板/小工具来构造一些“新”东西,那么我会做的。如果我需要优化或与已有产品脱节,那么我将做一些全新的事情。

我们目前拥有的小部件是:

我还没有完成菜单,模态窗口等,但是正如我所说的……这还是早期。

现在,让我们尝试一个超级简单的 Demo。

  1. package main 
  2.  import ( 
  3.     "github.com/hajimehoshi/ebiten" 
  4.     "github.com/kpfaulkner/goui/pkg" 
  5.     "github.com/kpfaulkner/goui/pkg/widgets" 
  6.     log "github.com/sirupsen/logrus" 
  7.     "image/color" 
  8. ) type MyApp struct { 
  9.     window pkg.Window} func NewMyApp() *MyApp { 
  10.     a := MyApp{}    a.window = pkg.NewWindow(800, 600, "test app"falsefalse
  11.     return &a 
  12. } func (m *MyApp) SetupUI() error { 
  13.     vPanel := widgets.NewVPanel("main vpanel", &color.RGBA{0, 0, 0, 0xff}) 
  14.     m.window.AddPanel(vPanel)    button1 := widgets.NewTextButton("text button 1""my button1"true, 0, 0, nil, nil, nil, nil) 
  15.     vPanel.AddWidget(button1)    return nil 
  16. } func (m *MyApp) Run() error { 
  17.     m.SetupUI()    ebiten.SetRunnableInBackground(true
  18.     ebiten.SetWindowResizable(true
  19.     m.window.MainLoop()    return nil 
  20. } func main() { 
  21.     log.SetLevel(log.DebugLevel)    app := NewMyApp()    app.Run()} 

让我们解释一下以上代码。

首先,该程序的核心仍然是直接调用 Ebiten。这些尚未封装。因此,你将在 main 和 Run 函数中看到,我们基本上已经制作了 MyApp 结构的实例,然后调用 SetupUI,设置一些 Ebiten 标志,然后调用 MainLoop。

NewMyApp 函数调用 pkg.NewWindow 函数。这是应用程序的主窗口。一旦添加了模态/其他窗口,这可能会更改,但是就目前而言,这将创建给定大小的主 UI 窗口。

SetupUI 是你需要注意的地方。我们要做的第一件事是创建一个 VPanel。请记住,VPanel 把小部件垂直堆叠放置。我们将 vPanel 添加到主窗口。实际上(当前),我们应该只在主窗口中添加 1 个面板,其他所有内容都应放入该面板中。因此,在这种情况下,我们创建 button1(新的 TextButton)并将其添加到 vPanel。

 

花点时间来学习理解一下上面的 UI 技能。

下面,让我们做一些更有趣的事情。假设我们要在按下按钮时做出响应。创建 TextButton 的行是:

  1. button1 := widgets.NewTextButton("text button 1""my button1"true, 0, 0, nil, nil, nil, nil) 

所有细节就不描述了,但是最后一个参数是带有 func (event IEvent) error签名的事件处理程序。因此,如果我们创建一个带有该签名的方法,并将其作为最后一个参数传递给 NewTextButton。

  1. func (m *MyApp) ButtonAction1(event events.IEvent) error { 
  2.     log.Debugf("My button1 action 1!!!"
  3.     return nil 

然后我们将按钮创建修改为

  1. button1 := widgets.NewTextButton("text button 1""my button1"true, 0, 0, nil, nil, nil, m.ButtonAction1) 

现在,当单击按钮时,将调用 ButtonAction1 函数,我们可以触发所需的任何功能。

是不是很简单。

现在,如果我想要在按钮旁边放点东西该怎么办?我们在这里要做的是创建一个 HPanel,并将其首先放入 VPanel。然后,将按钮添加到 HPanel。如果这样做,我们最终将得到如下代码:

  1. func (m *MyApp) SetupUI() error { 
  2.      vPanel := widgets.NewVPanel("main vpanel", &color.RGBA{0, 0, 0, 0xff}) 
  3.     m.window.AddPanel(vPanel) 
  4.      hPanel := widgets.NewHPanel("hpanel1", &color.RGBA{0, 100, 0, 255}) 
  5.     vPanel.AddWidget(hPanel) 
  6.      button1 := widgets.NewTextButton("text button 1""my button1"true, 0, 0, nil, nil, nil, m.ButtonAction1) 
  7.     hPanel.AddWidget(button1) 
  8.      return nil} 

从视觉上看,什么都不会改变。我们仍然只显示 1 个小部件。

现在,如果我们在同一 HPanel 中添加一个复选框怎么办?

  1. func (m *MyApp) SetupUI() error { 
  2.      vPanel := widgets.NewVPanel("main vpanel", &color.RGBA{0, 0, 0, 0xff}) 
  3.     m.window.AddPanel(vPanel) 
  4.      hPanel := widgets.NewHPanel("hpanel1", &color.RGBA{0, 100, 0, 255}) 
  5.     button1 := widgets.NewTextButton("text button 1""my button1"true, 0, 0, nil, nil, nil, m.ButtonAction1) 
  6.     hPanel.AddWidget(button1) 
  7.      cb1 := widgets.NewCheckBox("my checkbox1""check me please""""", nil) 
  8.     hPanel.AddWidget(cb1) 
  9.      vPanel.AddWidget(hPanel) 
  10.     return nil} 

因此,与之前完全相同,但只有这额外的两条:创建复选框,然后添加到 hPanel。

现在 UI 看起来是这样:

 

现在不担心这里的间距了。

现在让我们在 TextButton 下面添加一个 ImageButton。这意味着我们将向 vPanel 添加第二项(第一项是 hPanel)

  1. imageButton := widgets.NewImageButton("ib1""images/pressedbutton.png""images/nonpressedbutton.png",nil ) 
  2. vPanel.AddWidget(imageButton) 

这是效果如下:

 

这时,我们有了 2 张图片(屏幕截图中只显示了一张)。按下按钮时一个,不按下时一个(只更改了阴影)。懂了吧。

好了,介绍就这么多。虽然该 UI 库还不完善,但 GUI 的基本功能已经可以实现了。再次放上该库的地址:https://github.com/kpfaulkner/goui。

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯