用QML渲染界面

第一种: 通过QQickView

app = QGuiApplication([])
view = QQuickView()
view.engine().quit.connect(app.quit)
view.setSource(QUrl('main.qml'))
view.show()
sys.exit(app.exec_())

注意: QQickView的main.qml根节点不能是ApplicationWindow, 只能是Item类型

第二种: 通过QQmlApplicationEngine

# Create an instance of the application
app = QGuiApplication(sys.argv)
# Create QML engine
engine = QQmlApplicationEngine()
engine.addImportPath(":/qtquickcontrols2.conf") #可选，是设置Material主题
# Load the qml file into the engine
engine.load(QUrl("main.qml"))
# engine.quit.connect(app.quit)
sys.exit(app.exec_())

注意: QQmlApplicationEngine的main.qml根节点只能是ApplicationWindow

加载Material主题

步骤:

• 创建一个主题配置文件qtquickcontrols2.conf, 内容如下:

; This file can be edited to change the style of the application
; Read "Qt Quick Controls 2 Configuration File" for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html

[Controls]
Style=Material

[Universal]
Theme=Light
;Accent=Steel

[Material]
Theme=Dark
;Accent=BlueGrey
;Primary=BlueGray
;Foreground=Brown
;Background=Grey

• 创建一个资源文件qml.qrc, 内容如下:

<RCC>
    <qresource prefix="/">
        <file>qtquickcontrols2.conf</file>
    </qresource>
</RCC>

• 把qml.qrc编译成py文件, 代码如下:

pyrcc5 -o qrc.py qml.qrc

• 在启动QQmlApplicationEngine前引入qrc.py, 代码如下:

import qrc

• 通过Qt Resource添加方式引入qtquickcontrols2.conf, 代码如下:

engine.addImportPath(":/qtquickcontrols2.conf")

• 然后就可以在main.qml里使用Material主题了

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.11

ApplicationWindow {
    id: window
    width: 850
    height: 600
    opacity: 1
    visible: true
    Material.theme: Material.Dark
    Material.accent: Material.LightBlue
}

控制台信息打印到GUI

只需要把sys.stdout和sys.stderr重定向到新对象即可

• 创建一个继承QObject的对象
• 重载write和flush方法
• 当有打印信息输出时会调用write，如需要发送到GUI, 则添加一个信号槽机制即可

from PyQt5.QtCore import QObject, pyqtSignal, pyqtSlot, pyqtProperty
class QmlWorker(QObject):
    consoleInfo = pyqtSignal(str)

    def write(self, text):
        self.consoleInfo.emit(text.strip())

    def flush(self):
        pass

qml添加全局对象, 并实现信号槽 + 属性调用

• 创建一个继承QObject的对象

from PyQt5.QtCore import QObject, pyqtSignal, pyqtSlot, pyqtProperty
class QmlWorker(QObject):
    consoleInfo = pyqtSignal(str)
    ipChanged = pyqtSignal()

    def write(self, text):
        self.consoleInfo.emit(text.strip())

    def flush(self):
        pass

    @pyqtProperty(str, notify=ipChanged)
    def ip(self):
        return self.conf['ip']

    @ip.setter
    def ip(self, ip):
        self.conf['ip'] = ip

    @pyqtSlot()
    def run(self):
        print(self.conf)
        p = Thread(target=self.run_ui_process, kwargs=self.conf)
        p.start()

• 在启动main函数里添加全局对象

qml_worker = QmlWorker()
engine = QQmlApplicationEngine()
engine.rootContext().setContextProperty("qmlworker", qml_worker)

• 在qml文件里添加连接全局对象节点

Connections {
        target: qmlworker
        onConsoleInfo: {
            var text = arguments[0]
            if (text === null || text === '') {
                return
            }
            textArea.append(text)
        }
    }

• qml里调用全局对象的函数

qmlworker.run()

• qml里访问全局对象属性并赋值

// 访问对象IP属性
TextField {
    id: ipTextField
    text: qmlworker.ip
    ...
}
//给IP赋值
qmlworker.ip = 127.0.0.1

添加Font Awesome图标库

• 仿照上面“加载Material主题”模块

资源文件均可以采用该方法添加到pyqt

• 在启动main函数里添加如下内容

app = QGuiApplication(sys.argv)
loadedFontID = QFontDatabase.addApplicationFont(":font/Font_Awesome.otf")

loadedFontFamilies = QFontDatabase.applicationFontFamilies(loadedFontID)
if len(loadedFontFamilies) != 0:
     logger.info('font name:' + loadedFontFamilies[0])

Font_Awesome.otf 是Awesome官网下载的图标库

• 在qml里使用图标库

Button {
        id: execBtn
       text: "\uf0e7 执行"
       font.family: "Font Awesome 5 Free Solid"
       ...
}

\uf0e7就是Awesome里的图标