使用Golang和QML构建跨平台GUI框架并支持热加载

使用Golang和QML构建跨平台GUI框架并支持热加载 大家好，虽然我是新来的，但我看到很多关于使用Go构建GUI应用程序的问题。我使用Go和QML进行开发已经有一段时间了。最近我添加了一个热加载器，这样在开发过程中就可以更新QML而无需重新编译Go代码。希望这对大家有所帮助，我已经在这里写了完整的说明和示例：https://github.com/amlwwalker/got-qt

2 回复

太棒了！我想问一下，除了谷歌的Material设计和微软的Universal主题之外，QT还有哪些可用的UI主题？有没有像这里bootswatch.com为bootstrap提供的免费自定义主题？

更多关于使用Golang和QML构建跨平台GUI框架并支持热加载的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


以下是一个基于Go和QML实现跨平台GUI框架并支持热加载的示例代码。该方案通过文件监控实现QML文件的热重载，无需重新编译Go代码即可更新界面。

package main

import (
    "fmt"
    "log"
    "path/filepath"
    "time"

    "github.com/therecipe/qt/core"
    "github.com/therecipe/qt/qml"
    "github.com/therecipe/qt/widgets"
    "gopkg.in/fsnotify/fsnotify.v1"
)

func main() {
    app := widgets.NewQApplication(len([]string{}), []string{})

    // 创建QML引擎
    engine := qml.NewQQmlApplicationEngine(nil)
    
    // 初始加载QML文件
    qmlFile := "main.qml"
    engine.Load(core.NewQUrl3(filepath.Join("qml", qmlFile), 0))

    // 设置文件监控实现热加载
    setupHotReload(engine, qmlFile)

    app.Exec()
}

func setupHotReload(engine *qml.QQmlApplicationEngine, qmlFile string) {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal("创建文件监控失败:", err)
    }
    defer watcher.Close()

    qmlDir := "qml"
    err = watcher.Add(qmlDir)
    if err != nil {
        log.Fatal("监控目录失败:", err)
    }

    go func() {
        for {
            select {
            case event := <-watcher.Events:
                // 仅处理写入事件且目标为当前QML文件
                if event.Op&fsnotify.Write == fsnotify.Write && 
                   filepath.Base(event.Name) == qmlFile {
                    fmt.Println("检测到QML文件变更，重新加载...")
                    
                    // 延迟重载以避免文件写入未完成
                    time.Sleep(100 * time.Millisecond)
                    
                    // 清除引擎缓存并重新加载
                    engine.ClearComponentCache()
                    engine.Load(core.NewQUrl3(filepath.Join(qmlDir, qmlFile), 0))
                }
            case err := <-watcher.Errors:
                log.Println("文件监控错误:", err)
            }
        }
    }()
}

对应的QML文件示例（保存为qml/main.qml）：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "Go + QML 热加载示例"

    Text {
        anchors.centerIn: parent
        text: "Hello, 热加载!"
        font.pixelSize: 24
    }

    Button {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "测试按钮"
        onClicked: console.log("按钮被点击")
    }
}

该实现的核心特性：

  1. 使用fsnotify监控QML文件目录的变更
  2. 检测到目标QML文件修改时自动清除引擎缓存并重新加载
  3. 通过延迟重载确保文件写入完成
  4. 保持Go后端逻辑运行的同时更新前端界面

运行方式：

go mod init hotreload-example
go get github.com/therecipe/qt/cmd/... github.com/therecipe/qt
go get gopkg.in/fsnotify/fsnotify.v1
go run main.go

修改qml/main.qml文件中的文本或布局后保存，界面将自动更新而无需重启应用程序。

回到顶部