网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

2020-06-10 02:39:15 admin 621

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

最近试了下用 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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Ffyne-
io%2Ffyne)  
[2] 思源字体：[https://github.com/junmer/source-han-serif-
ttf](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fjunmer%2Fsource-
han-serif-ttf)  
[3] Github:
[https://github.com/anhao/ALAPI](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fanhao%2FALAPI)  
[4] 例子: [https://github.com/fyne-
io/examples/](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Ffyne-
io%2Fexamples%2F)  
[5] 文档::
[https://apps.fyne.io/](https://links.jianshu.com/go?to=https%3A%2F%2Fapps.fyne.io%2F)

转载文章，原文链接： Fyne 折腾手记：开发一个简易桌面应用

关键字词Fyne 手记

分享到：

上一篇：golang快速入门[8.4]-常量与隐式类型转换

下一篇：Golang: math/rand 和 crypto/rand 区别

如需留言，请登录，没有账号？请注册

0 条评论 0 人参与

网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

武云 2年前

网站首页 返回列表 像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

zhou 2年前

zhou 2年前

zhou 2年前

zhou 2年前

武云 2年前

网站首页返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。