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

最近试了下用 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，就可以查询到相关信息了：

编译打包

下载打包工具：

$ 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/