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

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

最近试了下用 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/