QML:为图像设置“源”属性会导致它消失

Posted

技术标签:

【中文标题】QML:为图像设置“源”属性会导致它消失【英文标题】:QML: Setting "source" property for image causes it to disappear 【发布时间】:2018-11-01 21:09:07 【问题描述】:

我要做的是在 PyQt5 中使用 QML 更新图像的源。当我使用element.setProperty("source", "./testImage.png") 更改图像时,我收到以下错误消息。

QML 图像:协议“”未知

关于如何解决这个问题的任何想法?

我研究了与 QML 元素交互的其他方式,如果可能的话,我想坚持通过 Python 代码而不是仅通过 QML 来更改图像。

ma​​in.py

from PyQt5.QtWidgets import *
from PyQt5.QtQml import *
from PyQt5.QtCore import *
from PyQt5.QtQuick import *
from PyQt5 import *

import sys
import resource_rc

class MainWindow(QQmlApplicationEngine):
    def __init__(self):
        super().__init__()
        self.load("main.qml")
        self.rootContext().setContextProperty("MainWindow", self)

        self.window = self.rootObjects()[0]

        self.cardLeft = self.window.findChild(QObject, "cardLeft")

    @pyqtSlot()
    def changeImage(self):
        self.cardLeft.setProperty("source", "./images/3_of_clubs.png")

if __name__ == '__main__':
    app = QApplication(sys.argv)

    window = MainWindow()

    sys.exit(app.exec_())

ma​​in.qml

import QtQml 2.11
import QtQuick 2.3
import QtQuick.Controls 2.1
import QtQuick.Window 2.2
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.11

ApplicationWindow
    id: screen
    width:  720
    height: 490
    visible: true
    Material.theme: Material.Dark

    Item 
      id: cards
      width: parent.width
      height: parent.height - toolBar.height
      anchors 
        top: parent.top;
        bottom: toolBar.top;
        bottomMargin: 10
      

      RowLayout 
        anchors.fill: parent
        spacing: 20

        Image 
          objectName: "cardLeft"
          id: cardLeft
          Layout.fillWidth: true
          Layout.maximumHeight: 250
          Layout.minimumHeight: parent.height
          Layout.margins: 20

          source: "./testImage.png"
          fillMode: Image.PreserveAspectFit
        
      
    

    Button 
      Layout.alignment: Qt.AlignHCenter
      Layout.fillWidth: true
      Layout.fillHeight: true
      Layout.maximumHeight: 100
      Layout.maximumWidth: 300
      Layout.margins: 20

      text: qsTr("Change Image")

      highlighted: true
      Material.accent: Material.color(Material.LightGreen)

      onClicked: MainWindow.changeImage()
    

【问题讨论】:

您可以尝试设置 url 而不是字符串吗? (我不确定自动转换是否有效。)QUrl("./images/3_of_clubs.png") 【参考方案1】:

你必须传递一个QUrl,你必须使用QUrl::fromLocalFile()

import os
import sys
from PyQt5 import QtCore, QtGui, QtQml
# import resource_rc

dir_path = os.path.dirname(os.path.realpath(__file__))


class MainWindow(QtQml.QQmlApplicationEngine):
    def __init__(self):
        super().__init__()
        self.load(QtCore.QUrl.fromLocalFile(os.path.join(dir_path, "main.qml")))
        self.rootContext().setContextProperty("MainWindow", self)

        if self.rootObjects():
            self.window = self.rootObjects()[0]
            self.cardLeft = self.window.findChild(QtCore.QObject, "cardLeft")

    @QtCore.pyqtSlot()
    def changeImage(self):
        if self.cardLeft:
            url = QtCore.QUrl.fromLocalFile(os.path.join(dir_path, "images/3_of_clubs.png"))
            self.cardLeft.setProperty("source", url)


if __name__ == '__main__':
    app = QtGui.QGuiApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec_())

【讨论】:

谢谢!奇迹般有效。另外,我注意到了细微的代码改进。

以上是关于QML:为图像设置“源”属性会导致它消失的主要内容,如果未能解决你的问题,请参考以下文章

Qml 图像和内存释放

在 UICollectionView/UITableView 中为滚动视图的偏移设置动画会导致单元格过早消失

Qt基于Qml图像帧动画播放

Qt 5.7 QML 为啥我的 CheckBox 属性绑定消失了?

在 React 中更改具有危险设置的 innerhtml 父属性的孩子的图像源属性

用于更新属性的 QML 条件逻辑