3.QML+Python开发搭建【实现热加载开发】

462 阅读1分钟

作者:大后天是星期天

社交:待定

公众号:待定

特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系笔者授权

热加载实现截图

image.png

热加载实现的QML


import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "qrc:///example/qml/component"

FluPage {
    id: root
    property var url: ""
    launchMode: FluPageType.SingleTop
    FluArea {
        id: area_id

        height: 50
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        FluComboBox {
            id: model_2

            anchors.left: parent.left
            anchors.right: sync_button.left
            anchors.leftMargin: 20
            anchors.rightMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            focus: true
            editable: true
            Component.onCompleted: {
                model_2.model = CommonHelper.getFiles();
                root.url = "http://192.168.152.1/chfs/shared/" + model_2.currentText;
                console.log("root.url", root.url);
            }
        }

        FluIconButton {
            id: sync_button

            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            iconSource: FluentIcons.Sync
            width: 30
            height: 30
            iconSize: 13
            onClicked: {
                model_2.model = CommonHelper.getFiles();
                root.url = "http://192.168.1.88/chfs/shared/" + model_2.currentText;
                loader.reload();
            }
        }
    }

    FluRemoteLoader {
        id: loader
        anchors.top: area_id.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        source: root.url
    }

}

代码说明

  • 项目整体使用zhuzichu520/PySide6-FluentUI-QML: FluentUI for PySide6 and QML (github.com)框架,框架本身也提供了热加载功能和远程加载功能,但是我在使用过程中发现热加载功能有些bug,不太好用,因此改造了一个通过远程加载来实现热加载的功能,希望可以提到开发速度
  • CommonHelper.getFiles();使用Python开发,获取所有文件列表 , loader.reload();实现实际的刷新加载
  • 本项目中存在的特殊链接http://192.168.1.88/chfs/shared/为文件服务器路径地址,是通过CHFS文件服务器工具生成的,其实通过Python创建一个HTTPServer也非常简单,看个人的选择,CHFS文件服务器长下面这样

image.png