Как отобразить QML в центре с QQuickWidget внутри QTabWidget? - PullRequest
Новая
       26

Как отобразить QML в центре с QQuickWidget внутри QTabWidget?

1 голос
/ 26 февраля 2020

Я пытаюсь отобразить пользовательский список с помощью QQuickWidget. Поскольку мне нужны два listView: один для результата поиска, другой для очереди, я использовал QTabWidget для переключения между этими двумя QQuickWidget.

Я не закончил создание этого listView (потому что я новичок в этом ) поэтому я импровизировал свой QML, чтобы проверить, работает ли он так, как я напечатал выше. Когда я запускаю свое приложение, QML, который находится внутри QTabWidget, неожиданно отображается.

Он должен отображать желтый прямоугольник и текст, как QQuickWidget ниже, но он отображает текст, выровненный в верхнем левом углу, без желтого прямоугольника.

Когда приложение выполняется

[То, что я пробовал] Я предположил, что это потому, что я помещаю QQuickWidget внутри QWidget на каждой вкладке, поэтому я повысил те QWidget как пользовательская страница, которая имеет QQuickWidget, но ничего не изменилось.

main.py 

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5 import uic
from PyQt5.QtQuickWidgets import QQuickWidget
from myresulttab import myResultTab
from myqueuetab import myQueueTab

#loading UI file
form_class = uic.loadUiType("mainWindowUI.ui")[0]

class WindowClass(QMainWindow, form_class) :

    def __init__(self) :
        super().__init__()
        self.setupUi(self)

        self.testQuickWidget.setSource(QUrl.fromLocalFile("resultTabQml.qml"))


if __name__ == "__main__" :

    app = QApplication(sys.argv) 
    myWindow = WindowClass() 
    myWindow.show()
    app.exec_()

mainWindowUI.ui 

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>555</width>
    <height>821</height>
   </rect>
  </property>
  <property name="font">
   <font>
    <family>NanumGothic</family>
    <pointsize>10</pointsize>
    <weight>50</weight>
    <italic>false</italic>
    <bold>false</bold>
   </font>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <property name="styleSheet">
   <string notr="true"/>
  </property>
  <widget class="QWidget" name="centralwidget">
   <property name="styleSheet">
    <string notr="true"/>
   </property>
   <layout class="QGridLayout" name="gridLayout" rowstretch="50,5,45,0" columnstretch="70,0">
    <property name="verticalSpacing">
     <number>15</number>
    </property>
    <item row="2" column="0" colspan="2">
     <widget class="QQuickWidget" name="testQuickWidget">
      <property name="resizeMode">
       <enum>QQuickWidget::SizeRootObjectToView</enum>
      </property>
     </widget>
    </item>
    <item row="0" column="0" colspan="2">
     <widget class="QTabWidget" name="tabWidget">
      <property name="currentIndex">
       <number>0</number>
      </property>
      <property name="elideMode">
       <enum>Qt::ElideNone</enum>
      </property>
      <widget class="myResultTab" name="resultTab">
       <property name="font">
        <font>
         <family>NanumGothic</family>
         <pointsize>10</pointsize>
         <weight>50</weight>
         <italic>false</italic>
         <bold>false</bold>
        </font>
       </property>
       <attribute name="title">
        <string>검색창</string>
       </attribute>
      </widget>
      <widget class="myQueueTab" name="queueTab">
       <property name="autoFillBackground">
        <bool>false</bool>
       </property>
       <attribute name="title">
        <string>QUEUE</string>
       </attribute>
      </widget>
     </widget>
    </item>
    <item row="1" column="0">
     <widget class="QLabel" name="console">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Preferred" vsizetype="Minimum">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="font">
       <font>
        <family>NanumGothic</family>
        <pointsize>10</pointsize>
        <weight>50</weight>
        <italic>false</italic>
        <bold>false</bold>
       </font>
      </property>
      <property name="toolTip">
       <string extracomment="프로그램이 당신에게 보내는 편지입니다. 다정하게 대해주세요 :)"/>
      </property>
      <property name="text">
       <string>resultTabQML.qml should be displayed like this!</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>555</width>
     <height>20</height>
    </rect>
   </property>
   <widget class="QMenu" name="menu_F">
    <property name="title">
     <string>파일(&amp;F)</string>
    </property>
   </widget>
   <widget class="QMenu" name="menu_E">
    <property name="title">
     <string>편집(&amp;E)</string>
    </property>
    <addaction name="separator"/>
    <addaction name="separator"/>
   </widget>
   <addaction name="menu_F"/>
   <addaction name="menu_E"/>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QQuickWidget</class>
   <extends>QWidget</extends>
   <header location="global">QtQuickWidgets/QQuickWidget</header>
  </customwidget>
  <customwidget>
   <class>myResultTab</class>
   <extends>QWidget</extends>
   <header>myresulttab.h</header>
   <container>1</container>
  </customwidget>
  <customwidget>
   <class>myQueueTab</class>
   <extends>QWidget</extends>
   <header>myqueuetab.h</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
 <slots>
  <slot>inquireDataBtnPressed()</slot>
  <slot>insertDataBtnPressed()</slot>
  <slot>deleteDataBtnPressed()</slot>
  <slot>updateDataBtnPressed()</slot>
  <slot>getDataFromApiBtnPressed()</slot>
 </slots>
</ui>

myResultTab.py 

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtQuickWidgets import QQuickWidget

class myResultTab(QWidget):

    def __init__(self):
        super().__init__()
        layout = QVBoxLayout(self)
        resultQuickWidget = QQuickWidget(QUrl.fromLocalFile("resultTabQml.qml"))
        layout.addWidget(resultQuickWidget)
        self.setLayout(layout)

myQueueTab.py 

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtQuickWidgets import QQuickWidget

class myQueueTab(QWidget):

    def __init__(self):
        super().__init__()
        layout = QVBoxLayout(self)
        queueQuickWidget = QQuickWidget(QUrl.fromLocalFile("queueTabQml.qml"))
        layout.addWidget(queueQuickWidget)
        self.setLayout(layout)

resultTabQml.qml 

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Item{
    Rectangle{
        id:rect1
        color:"yellow"
        anchors.fill: parent
        Text {
            id: sampleText1
            text: qsTr("sampleText1")
            font.family: "Arial"
            font.pointSize: 50
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }

}
/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

1 Ответ

1 голос
/ 26 февраля 2020

Необходимо установить для свойства ResizeMode значение SizeRootObjectToView, чтобы root расширялся в зависимости от размера QQuickWidget: 

import os

from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QVBoxLayout, QWidget
from PyQt5.QtQuickWidgets import QQuickWidget

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


class myResultTab(QWidget):
    def __init__(self):
        super().__init__()
        layout = QVBoxLayout(self)
        filename = os.path.join(CURRENT_DIR, "resultTabQml.qml")
        resultQuickWidget = QQuickWidget(QUrl.fromLocalFile(filename))
        <b>resultQuickWidget.setResizeMode(QQuickWidget.SizeRootObjectToView)</b>
        layout.addWidget(resultQuickWidget)

enter image description here

Если вы не установите его, тогда resizeMode использует значение по умолчанию SizeViewToRootObject, что элемент не будет учитывать размер представления, так что элемент будет иметь размер 0x0 и, следовательно, желтый прямоугольник также будет того же размера, и текст будет центрирован в позиции (0, 0), которая показана на изображении, предоставленном OP.

...