Golang的GUI开发包fyne基本教程

关于 Fyne
Fyne 是使用 Go 语言编写的易于使用的 UI 工具包和应用程序 API。它旨在构建使用单个代码库在桌面和移动设备上运行的应用程序。

当前的版本是 1.2，该版本增加了对 iOS 和 Android 设备的支持，并提供了编写自定义窗口小部件的更简单方法。我们现在正在朝 1.3 迈进，它将添加数据绑定和一些更高级的小部件，例如表和列表。

使用条件
要使用 Fyne 开发应用，您将需要 Go 1.12 或更高版本。

设置好goproxy=https://goproxy.cn，采用go mod模式开发，可以自动下载依赖包。

编译注意事项

如果不带任何参数编译，fyne应用会先打开控制台窗口，然后才从控制台窗口打开应用。要取消启动时的控制台窗口，需要在编译时加入如下参数：-ldflags -H=windowsgui。如下：

go build -ldflags -H=windowsgui main.go

Helloworld示例：

    package main

    import "fyne.io/fyne/widget"
    import "fyne.io/fyne/app"

    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()
    }

运行效果：

 一个更复杂的示例：

// Package main provides various examples of Fyne API capabilities
package main

import (
    "fmt"
    "net/url"

    "fyne.io/fyne"
    "fyne.io/fyne/app"
    "fyne.io/fyne/canvas"
    "fyne.io/fyne/cmd/fyne_demo/data"
    "fyne.io/fyne/cmd/fyne_demo/screens"
    "fyne.io/fyne/layout"
    "fyne.io/fyne/theme"
    "fyne.io/fyne/widget"
)

const preferenceCurrentTab = "currentTab"

func parseURL(urlStr string) *url.URL {
    link, err := url.Parse(urlStr)
    if err != nil {
        fyne.LogError("Could not parse URL", err)
    }

    return link
}

func welcomeScreen(a fyne.App) fyne.CanvasObject {
    logo := canvas.NewImageFromResource(data.FyneScene)
    logo.SetMinSize(fyne.NewSize(228, 167))

    return widget.NewVBox(
        widget.NewLabelWithStyle("Welcome to the Fyne toolkit demo app", fyne.TextAlignCenter, fyne.TextStyle{Bold: true}),
        layout.NewSpacer(),
        widget.NewHBox(layout.NewSpacer(), logo, layout.NewSpacer()),

        widget.NewHBox(layout.NewSpacer(),
            widget.NewHyperlink("fyne.io", parseURL("https://fyne.io/")),
            widget.NewLabel("-"),
            widget.NewHyperlink("documentation", parseURL("https://fyne.io/develop/")),
            widget.NewLabel("-"),
            widget.NewHyperlink("sponsor", parseURL("https://github.com/sponsors/fyne-io")),
            layout.NewSpacer(),
        ),
        layout.NewSpacer(),

        widget.NewGroup("Theme",
            fyne.NewContainerWithLayout(layout.NewGridLayout(2),
                widget.NewButton("Dark", func() {
                    a.Settings().SetTheme(theme.DarkTheme())
                }),
                widget.NewButton("Light", func() {
                    a.Settings().SetTheme(theme.LightTheme())
                }),
            ),
        ),
    )
}

func main() {
    a := app.NewWithID("io.fyne.demo")
    a.SetIcon(theme.FyneLogo())

    w := a.NewWindow("Fyne Demo")
    w.SetMainMenu(fyne.NewMainMenu(fyne.NewMenu("File",
        fyne.NewMenuItem("New", func() { fmt.Println("Menu New") }),
        // a quit item will be appended to our first menu
    ), fyne.NewMenu("Edit",
        fyne.NewMenuItem("Cut", func() { fmt.Println("Menu Cut") }),
        fyne.NewMenuItem("Copy", func() { fmt.Println("Menu Copy") }),
        fyne.NewMenuItem("Paste", func() { fmt.Println("Menu Paste") }),
    )))
    w.SetMaster()

    tabs := widget.NewTabContainer(
        widget.NewTabItemWithIcon("Welcome", theme.HomeIcon(), welcomeScreen(a)),
        widget.NewTabItemWithIcon("Widgets", theme.ContentCopyIcon(), screens.WidgetScreen()),
        widget.NewTabItemWithIcon("Graphics", theme.DocumentCreateIcon(), screens.GraphicsScreen()),
        widget.NewTabItemWithIcon("Windows", theme.ViewFullScreenIcon(), screens.DialogScreen(w)),
        widget.NewTabItemWithIcon("Advanced", theme.SettingsIcon(), screens.AdvancedScreen(w)))
    tabs.SetTabLocation(widget.TabLocationLeading)
    tabs.SelectTabIndex(a.Preferences().Int(preferenceCurrentTab))
    w.SetContent(tabs)

    w.ShowAndRun()
    a.Preferences().SetInt(preferenceCurrentTab, tabs.CurrentTabIndex())
}

运行效果：

 

 中文支持

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

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

也可以用YaHeiConsolasHybrid.ttf字体，只要设置好FYNE_FONT变量就可以。

 

下面是一个查询网络IP属主的示例：

package main

import (
    "fmt"
    "fyne.io/fyne"
    "fyne.io/fyne/app"
    "fyne.io/fyne/theme"
    "fyne.io/fyne/widget"
    "fyne.io/fyne/layout"
    "net/http"
    "io/ioutil"
    "encoding/json"
)

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"`
}

func main() {
    a := app.New()
    a.Settings().SetTheme(theme.LightTheme())
    w := a.NewWindow("Demo")
    w.Resize(fyne.NewSize(600, 500))
    w.SetContent(fyne.NewContainerWithLayout(layout.NewGridLayoutWithColumns(2), info(GetIpInfo("")), query()))
    w.ShowAndRun()
}

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)
}

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)
}

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)
}

运行效果如下：