Fyne 折腾手记：开发一个简易桌面应用

您所在的位置：网站首页 › 简易桌面app官方下载安装苹果 › Fyne 折腾手记：开发一个简易桌面应用

Fyne 折腾手记：开发一个简易桌面应用

2024-07-12 22:12| 来源: 网络整理| 查看: 265

文章首发于个人公众号：「阿拉平平」

最近试了下用 Fyne 库开发桌面应用，特此记录和分享一下。本文演示环境为 Windows，Fyne 版本为 1.2.3。

简介

Fyne 是一个 Go 语言开发的 UI 工具包。通过 Fyne，我们可以构建桌面和移动设备上运行的应用程序。

安装

在安装 Fyne 前，请确保 Go 版本在 1.12 以上。

$ go version go1.12.9 windows/amd64

安装 Fyne 库：

$ go get -u fyne.io/fyne

安装完成后，用官方的例子测试下，代码如下：

package main import ( "fyne.io/fyne/app" "fyne.io/fyne/widget" ) func main() { app := app.New() w := app.NewWindow("Hello") w.SetContent(widget.NewVBox( widget.NewLabel("Hello Fyne!"), widget.NewButton("Quit", func() { app.Quit() }), )) w.ShowAndRun() }

但是运行失败了，提示找不到 gcc 的可执行文件：

# command-line-arguments C:\tools\Go\pkg\tool\windows_amd64\link.exe: running gcc failed: exec: "gcc": executable file not found in %PATH%

要解决这个问题，需要下载安装 MinGW，并将 bin 目录添加到环境变量中。再运行就可以看到界面了：

接下来是 Fyne 的实践部分，我打算用 Fyne 开发一个查询 IP 归属地的桌面应用，让我们一起动手试试吧。

界面开发

我们先完成界面部分的开发。

窗口

窗口可以根据自己喜好来调整，这里贴下我的代码：

package main import ( "fyne.io/fyne" "fyne.io/fyne/app" "fyne.io/fyne/theme" ) func main() { a := app.New() a.Settings().SetTheme(theme.LightTheme()) w := a.NewWindow("Demo") w.Resize(fyne.NewSize(600, 500)) w.ShowAndRun() }

说明：

SetTheme()：设置应用的主题，默认为 DarkTheme。 NewWindow()：初始化窗口，可修改标题。 Resize()：设置窗口尺寸。

窗口调整完成后，就可以开始添加组件了。

组件

Fyne 自带了一些常用的组件，使用的时候需要导入 widget 包：

import "fyne.io/fyne/widget"

首先添加一个用来显示数据的函数，这里我命名为 info，代码如下：

func info() fyne.CanvasObject { // 核心功能还未编写，先用假数据填充 ip := widget.NewLabel("114.114.114.114") position := widget.NewLabel("中国江苏省南京市") isp := widget.NewLabel("南京信风网络科技有限公司GreatbitDNS服务器") // 初始化表单，用来显示数据 form := widget.NewForm( &widget.FormItem{Text: "IP地址:", Widget: ip}, &widget.FormItem{Text: "所属地:", Widget: position}, &widget.FormItem{Text: "供应商:", Widget: isp}, ) // 分组 info := widget.NewGroup("Info", form) // 返回一个支持滚动的容器 return widget.NewScrollContainer(query) }

接着添加一个用来查询 IP 的函数，命名为 query，代码如下：

func query() fyne.CanvasObject { // 初始化 ip 输入框 ip := widget.NewEntry() // 设置输入框提示信息 ip.SetPlaceHolder("Please input IP address") // 定义表单和触发事件 form := &widget.Form{ OnSubmit: func() { fmt.Println("Form submitted") fmt.Println("IP Address:", ip.Text) }, } // 将 ip 添加到表单中，之后从表单中就可以获取到 ip form.Append("IP", ip) // 分组 query := widget.NewGroup("Query", form) // 返回一个支持滚动的容器 return widget.NewScrollContainer(query) }

最后在主函数中添加 SetContent 方法，并使用 NewHBox 水平显示组件：

w.SetContent(widget.NewHBox( info(), query(), ))

添加完成后，看下效果：

看到这效果，我当场裂开了。看来使用 NewHBox 效果并不理想，还需要调整下界面的布局。

布局

我们可以使用 Fyne 自带的布局，先导入 layout 包：

import "fyne.io/fyne/layout"

再修改下 SetContent 的内容：

w.SetContent(fyne.NewContainerWithLayout(layout.NewGridLayoutWithColumns(2), info(), query())

简单说明下：

NewGridLayoutWithColumns：返回一个 gridLayout 结构体，可以指定列数。如果需要垂直布局，可以替换成 NewGridLayoutWithRows。

NewContainerWithLayout：返回一个 Container 实例，使布局生效。

可以看到，布局已经没问题了：

布局是没问题了，但是看到这方块字，我又裂开了。很明显，目前 Fyne 窗口无法显示中文，这个要怎么解决呢？

中文支持

首先，下载一个 TTF 格式的中文字库，这里我找了个思源字体的字库。需要注意的是，字库的格式必须是 TTF 的，否则会报错。

然后添加一个环境变量 FYNE_FONT，指定下载好的字库文件：

再看下窗口效果，舒服了：

功能实现

在之前的章节中，我们已经完成了界面的开发，现在可以去实现功能了。

接口

之前的 IP 信息我们是写死在代码里的，现在改为调用接口的方式。

关于接口，我使用的是 ALAPI 提供的接口服务，这个开源项目提供了许多实用的数据接口，有兴趣的童鞋可以移步到 Github。

请求地址：

http://v1.alapi.cn/api/ip?ip=114.114.114.114&format=json

返回数据如下：

{ "code": 200, "msg": "success", "data": { "beginip": "114.114.114.114", "endip": "114.114.114.114", "pos": "中国江苏省南京市", "isp": "南京信风网络科技有限公司GreatbitDNS服务器", "location": { "lat": 32.05838, "lng": 118.79647 }, "rectangle": "", "ad_info": { "nation": "中国", "province": "江苏省", "city": "南京市", "district": "", "adcode": 320100 }, "ip": "114.114.114.114" }, "Author": { "name": "Alone88", "desc": "由Alone88提供的免费API 服务，官方文档：www.alapi.cn" } }

接口有了，接下来我们调整下之前的代码。

代码调整

定义全局变量与结构体：

var ip = widget.NewLabel("") var position = widget.NewLabel("") var isp = widget.NewLabel("") type IpInfo struct { Code int `json:"code"` Message string `json:"msg"` Data `json:"data"` } type Data struct { IP string `json:"ip"` Position string `json:"pos"` Isp string `json:"isp"` }

说明：

ip，position 和 isp 这里定义成全局变量，是因为之后这部分信息在点击提交按钮后会发生变更。

新增 GetIpInfo 函数用来获取接口数据：

func GetIpInfo(ip string) string { if len(ip) == 0 { return "" } url := fmt.Sprintf("http://v1.alapi.cn/api/ip?ip=%s&format=json", ip) resp, err := http.Get(url) if err != nil { // handle error } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) if err != nil { // handle error } return string(body) }

调整 info 函数：

func info(response string) fyne.CanvasObject { var i IpInfo json.Unmarshal([]byte(response),&i) screen := widget.NewForm( &widget.FormItem{Text: "IP地址:", Widget: ip}, &widget.FormItem{Text: "所属地:", Widget: position}, &widget.FormItem{Text: "供应商:", Widget: isp}, ) ip.SetText(i.IP) position.SetText(i.Position) isp.SetText(i.Isp) info := widget.NewGroup("Info", screen) return widget.NewScrollContainer(info) }

说明：

info() 接受 GetIpInfo 的返回值并将数据反序列化，通过 SetText 方法更新信息。

调整 query 函数：

func query() fyne.CanvasObject { ip := widget.NewEntry() ip.SetPlaceHolder("Please input IP address") form := &widget.Form{ OnSubmit: func() { info(GetIpInfo(ip.Text)) }, } form.Append("IP", ip) query := widget.NewGroup("Query", form) return widget.NewScrollContainer(query) }

说明：

OnSubmit 中调用 info()，即点击 Submit 后获取并显示数据。

调整 main 函数：

w.SetContent(fyne.NewContainerWithLayout(layout.NewGridLayoutWithColumns(2), info(GetIpInfo("")), query()))

输入 IP 后点击 Submit，就可以查询到相关信息了：

demo3.png 编译打包

下载打包工具：

$ go get fyne.io/fyne/cmd/fyne

在项目目录中放入图标，执行以下命令：

$ fyne package -icon icon.png 写在后面

文中的例子写的比较简单，有许多不完善的地方，有兴趣的小伙伴可以去 GitHub 上看看，在上面可以找到更多的例子和文档。

如果有需要 MinGW for Windows x64 和中文字体的小伙伴，可以去微信公众号后台回复 fyne 获取。

References

[1] Fyne: https://github.com/fyne-io/fyne [2] 思源字体：https://github.com/junmer/source-han-serif-ttf [3] Github: https://github.com/anhao/ALAPI [4] 例子: https://github.com/fyne-io/examples/ [5] 文档:: https://apps.fyne.io/

【本文地址】

公司简介

联系我们