Fyne与Wails深度对比：Go GUI 框架选型决策指南

// Fyne 的纯 Go 代码风格 - 一切在 Go 中完成
package main

import (
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/widget"
)

func main() {
    a := app.New()
    w := a.NewWindow("纯 Go GUI")
    w.SetContent(container.NewVBox(
        widget.NewLabel("直接在 Go 中构建 UI"),
        widget.NewButton("点击我", func() {
            // Go 原生处理逻辑
        }),
    ))
    w.ShowAndRun()
}

// Wails 的 Go 后端代码 - 核心逻辑层
package main

import (
    "context"
)

type App struct {
    ctx context.Context
}

func NewApp() *App {
    return &App{}
}

func (a *App) startup(ctx context.Context) {
    a.ctx = ctx
}

// 暴露给前端调用的方法
func (a *App) Greet(name string) string {
    return "Hello " + name + " from Go!"
}

func main() {
    err := wails.Run(&options.App{
        Title:  "WailsApp",
        Width:  800,
        Height: 600,
        Bind: []interface{}{
            NewApp(),
        },
    })
    if err != nil {
        panic(err)
    }
}

<template>
  <div>
    <h1>{{ result }}</h1>
    <input v-model="name" placeholder="输入姓名" />
    <button @click="callGo">调用 Go 方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Greet } from '../wailsjs/go/main/App'

const name = ref('')
const result = ref('')

const callGo = async () => {
  result.value = await Greet(name.value)
}
</script>

// Fyne 编译优化配置（可进一步缩减体积）
// go build -ldflags "-s -w -H=windowsgui" -o app.exe

// 使用 upx 压缩后，Fyne 应用可进一步缩小到 6-8MB

# Fyne 常用命令
fyne package -os darwin -icon icon.png      # macOS 打包
fyne package -os windows -icon icon.ico     # Windows 打包
fyne install                                # 安装到本地系统

# Wails 常用命令
wails init -n myproject -t vue              # 初始化项目
wails dev                                   # 开发模式（前端热重载）
wails build                                 # 生产构建
wails build -platform windows/amd64         # 跨平台构建

// Fyne 自定义控件示例：圆角按钮
package main

import (
    "image/color"
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/canvas"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/widget"
)

type RoundedButton struct {
    widget.BaseWidget
    text  string
    onTap func()
    color color.Color
}

func NewRoundedButton(text string, tap func()) *RoundedButton {
    b := &RoundedButton{text: text, onTap: tap,
        color: color.RGBA{50, 130, 220, 255}}
    b.ExtendBaseWidget(b)
    return b
}

func (b *RoundedButton) CreateRenderer() fyne.WidgetRenderer {
    bg := canvas.NewRectangle(b.color)
    bg.CornerRadius = 8
    label := canvas.NewText(b.text, color.White)
    label.Alignment = fyne.TextAlignCenter
    c := container.NewStack(bg, label)
    return widget.NewSimpleRenderer(c)
}

func (b *RoundedButton) Tapped(_ *fyne.PointEvent) {
    if b.onTap != nil {
        b.onTap()
    }
}

func main() {
    a := app.New()
    w := a.NewWindow("Fyne 自定义控件")
    w.SetContent(NewRoundedButton("圆角按钮", func() {
        // 点击处理
    }))
    w.ShowAndRun()
}

<!-- Wails 前端可以使用任意 Web 技术实现精美 UI -->
<div class="glass-card">
  <h2 class="gradient-text">现代感十足</h2>
  <div class="animate-fade-in">
    CSS 动画、渐变、阴影、毛玻璃效果一应俱全
  </div>
</div>

<style>
.glass-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

package main

import (
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/dialog"
    "fyne.io/fyne/v2/widget"
)

type Todo struct {
    Text    string
    Done    bool
}

func main() {
    a := app.New()
    w := a.NewWindow("Fyne 待办事项")
    w.Resize(fyne.NewSize(400, 500))

    var todos []Todo
    var list *widget.List

    input := widget.NewEntry()
    input.SetPlaceHolder("输入待办事项...")

    list = widget.NewList(
        func() int { return len(todos) },
        func() fyne.CanvasObject { return widget.NewCheck("", nil) },
        func(i widget.ListItemID, obj fyne.CanvasObject) {
            check := obj.(*widget.Check)
            check.Text = todos[i].Text
            check.Checked = todos[i].Done
            check.OnChanged = func(checked bool) {
                todos[i].Done = checked
            }
        },
    )

    addBtn := widget.NewButton("添加", func() {
        if input.Text != "" {
            todos = append(todos, Todo{Text: input.Text, Done: false})
            input.SetText("")
            list.Refresh()
        }
    })

    clearBtn := widget.NewButton("清除已完成", func() {
        var newTodos []Todo
        for _, t := range todos {
            if !t.Done {
                newTodos = append(newTodos, t)
            }
        }
        todos = newTodos
        list.Refresh()
    })

    w.SetContent(container.NewBorder(
        container.NewHBox(input, addBtn),
        clearBtn, nil, nil, list,
    ))
    w.ShowAndRun()
}

package main

import (
    "context"
)

type CounterApp struct {
    ctx     context.Context
    counter int
}

func NewCounterApp() *CounterApp {
    return &CounterApp{counter: 0}
}

func (a *CounterApp) startup(ctx context.Context) {
    a.ctx = ctx
}

func (a *CounterApp) GetCount() int {
    return a.counter
}

func (a *CounterApp) Increment() int {
    a.counter++
    return a.counter
}

func (a *CounterApp) Decrement() int {
    a.counter--
    return a.counter
}

func (a *CounterApp) Reset() int {
    a.counter = 0
    return a.counter
}

<template>
  <div class="container">
    <h1>计数器</h1>
    <div class="count">{{ count }}</div>
    <div class="buttons">
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { GetCount, Increment, Decrement, Reset } from '../wailsjs/go/main/CounterApp'

const count = ref(0)

const sync = async () => {
  count.value = await GetCount()
}

const increment = async () => {
  count.value = await Increment()
}

const decrement = async () => {
  count.value = await Decrement()
}

const reset = async () => {
  count.value = await Reset()
}

sync()
</script>