pyqt Pyside6文档基本阅读2

12 Python-QML integration

https://doc.qt.io/qtforpython-6/tutorials/qmlintegration/qmlintegration.html
QML提供了信号signals，被QmlElement装饰的类提供了slot槽，使用QQmlApplicationEngine类来加载QML文件。

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial

import sys
from pathlib import Path

from PySide6.QtCore import QObject, Slot
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine, QmlElement
from PySide6.QtQuickControls2 import QQuickStyle

import style_rc

# To be used on the @QmlElement decorator
# (QML_IMPORT_MINOR_VERSION is optional)
QML_IMPORT_NAME = "io.qt.textproperties"
QML_IMPORT_MAJOR_VERSION = 1


@QmlElement  # 装饰器，表示信号传递给这些槽，下面的函数都是槽，信号都在qml文件中
class Bridge(QObject):

    @Slot(str, result=str)
    def getColor(self, s): # 槽，信号来自qml文件
        if s.lower() == "red":
            return "#ef9a9a"
        elif s.lower() == "green":
            return "#a5d6a7"
        elif s.lower() == "blue":
            return "#90caf9"
        else:
            return "white"

    @Slot(float, result=int)
    def getSize(self, s): # 槽，信号来自qml文件
        size = int(s * 34)
        if size <= 0:
            return 1
        else:
            return size

    @Slot(str, result=bool)
    def getItalic(self, s): # 槽，信号来自qml文件
        if s.lower() == "italic":
            return True
        else:
            return False

    @Slot(str, result=bool)
    def getBold(self, s): # 槽，信号来自qml文件
        if s.lower() == "bold":
            return True
        else:
            return False

    @Slot(str, result=bool)
    def getUnderline(self, s): # 槽，信号来自qml文件
        if s.lower() == "underline":
            return True
        else:
            return False

if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    QQuickStyle.setStyle("Material")
    engine = QQmlApplicationEngine()  # 分析qml文件

    # Get the path of the current directory, and then add the name
    # of the QML file, to load it.
    qml_file = Path(__file__).parent / 'view.qml'
    engine.load(qml_file)

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec())

// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial


import QtQuick 2.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.1
import QtQuick.Window 2.1
import QtQuick.Controls.Material 2.1

import io.qt.textproperties 1.0

// 窗口
ApplicationWindow {
    id: page
    width: 800
    height: 400
    visible: true
    Material.theme: Material.Dark
    Material.accent: Material.Red

    Bridge { // 和main.py中的槽类对应，将下面的信号signals connect到槽slot所在的类
        id: bridge
    }

    GridLayout { // 布局2行2列
        id: grid // 名称
        columns: 2
        rows: 2

        ColumnLayout { //列布局
            spacing: 2
            Layout.columnSpan: 1
            Layout.preferredWidth: 400

            Text {
                id: leftlabel
                Layout.alignment: Qt.AlignHCenter
                color: "white"
                font.pointSize: 16
                text: "Qt for Python"
                Layout.preferredHeight: 100
                Material.accent: Material.Green
            }

            RadioButton {
                id: italic
                Layout.alignment: Qt.AlignLeft //左对齐
                text: "Italic"
                onToggled: { // 选择信号，传递到槽
                    leftlabel.font.italic = bridge.getItalic(italic.text)
                    leftlabel.font.bold = bridge.getBold(italic.text)
                    leftlabel.font.underline = bridge.getUnderline(italic.text)

                }
            }
            RadioButton {
                id: bold
                Layout.alignment: Qt.AlignLeft
                text: "Bold"
                onToggled: { // 选择信号，传递到槽
                    leftlabel.font.italic = bridge.getItalic(bold.text)
                    leftlabel.font.bold = bridge.getBold(bold.text)
                    leftlabel.font.underline = bridge.getUnderline(bold.text)
                }
            }
            RadioButton {
                id: underline
                Layout.alignment: Qt.AlignLeft
                text: "Underline"
                onToggled: { // 选择信号，调用槽函数slot
                    leftlabel.font.italic = bridge.getItalic(underline.text)
                    leftlabel.font.bold = bridge.getBold(underline.text)
                    leftlabel.font.underline = bridge.getUnderline(underline.text)
                }
            }
            RadioButton {
                id: noneradio
                Layout.alignment: Qt.AlignLeft
                text: "None"
                checked: true
                onToggled: { // 选择信号，调用槽函数slot
                    leftlabel.font.italic = bridge.getItalic(noneradio.text)
                    leftlabel.font.bold = bridge.getBold(noneradio.text)
                    leftlabel.font.underline = bridge.getUnderline(noneradio.text)
                }
            }
        }

        ColumnLayout { // 第2列
            id: rightcolumn
            spacing: 2
            Layout.columnSpan: 1
            Layout.preferredWidth: 400
            Layout.preferredHeight: 400
            Layout.fillWidth: true

            RowLayout { // 第2列第一行布局
                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter


                Button { // 按钮
                    id: red
                    text: "Red"
                    highlighted: true
                    Material.accent: Material.Red
                    onClicked: { // 点击以后调用槽函数slot
                        leftlabel.color = bridge.getColor(red.text)
                    }
                }
                Button {
                    id: green
                    text: "Green"
                    highlighted: true
                    Material.accent: Material.Green
                    onClicked: { // 点击以后调用槽函数slot
                        leftlabel.color = bridge.getColor(green.text)
                    }
                }
                Button {
                    id: blue
                    text: "Blue"
                    highlighted: true
                    Material.accent: Material.Blue
                    onClicked: { // 点击以后调用槽函数slot
                        leftlabel.color = bridge.getColor(blue.text)
                    }
                }
                Button {
                    id: nonebutton
                    text: "None"
                    highlighted: true
                    Material.accent: Material.BlueGrey
                    onClicked: { // 点击以后调用槽函数slot
                        leftlabel.color = bridge.getColor(nonebutton.text)
                    }
                }
            }
            RowLayout { // 第2列第2行, 按照行布局
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                Text {
                    id: rightlabel
                    color: "white"
                    Layout.alignment: Qt.AlignLeft
                    text: "Font size"
                    Material.accent: Material.White
                }
                Slider {  // 滑动条
                    width: rightcolumn.width*0.6
                    Layout.alignment: Qt.AlignRight
                    id: slider
                    value: 0.5
                    onValueChanged: { // 滑动条滑动以后，滑动值变化，调用槽函数slot
                        leftlabel.font.pointSize = bridge.getSize(value)
                    }
                }
            }
        }
    }
}

13 QML Application Tutorial

使用QT creator来产生一个qml的项目
https://doc.qt.io/qtforpython-6/PySide6/QtCore/QStringListModel.html#PySide6.QtCore.QStringListModel

// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.12
import QtQuick.Controls 2.12

Page {
    
    width: 640
    height: 480
    required property var myModel

    header: Label {
                 // header
        color: "#15af15"
        text: qsTr("Where do people use Qt?") // 字体
        font.pointSize: 17
        font.bold: true
        font.family: "Arial"
        renderType: Text.NativeRendering        
        horizontalAlignment: Text.AlignHCenter
        padding: 10
    }
    Rectangle {
     // 矩形布局
        id: root
        width: parent.width
        height: parent.height

        Image {
     // 放置一个图片
            id: image
            fillMode: Image.PreserveAspectFit // 填充模式
            anchors.centerIn: root // 在矩形内部居中放置
            source: "./logo.png"   // 图片路径
            opacity: 0.5           // 不透明度

        }

        ListView {
     // 列表视图
            id: view
            anchors.fill: root
            anchors.margins: 25
            model: myModel // 列表要显示的具体内容
            delegate: Text {
      // 列表的类型，文本
                anchors.leftMargin: 50
                font.pointSize: 15
                horizontalAlignment: Text.AlignHCenter
                text: display
            }
        }
    }
    NumberAnimation {
        // 动画
        id: anim
        running: true
        target: view     // 动画的目标，列表
        property: "contentY" // Y轴方向
        duration: 500
    }
}

main.py

import sys
import urllib.request
import json
from pathlib import Path

from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication


if __name__ == '__main__':

    #get our data
    url = "http://country.io/names.json"
    response = urllib.request.urlopen(url)
    data = json.loads(response.read().decode('utf-8'))   # 下载json的数据

    #Format and sort the data
    data_list = list(data.values())
    data_list.sort()    # 拿到dictionary的value

    #Set up the application window
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView) # 自适应窗口大小，拽动也能保持不变

    #Expose the list to the Qml code
    my_model = QStringListModel()     # 字符串列表模式，视图可视化
    my_model.setStringList(data_list) # 配置字符串列表
    view.setInitialProperties({
    "myModel": my_model}) # 视图加入初始化的属性

    #Load the QML file
    qml_file = Path(__file__).parent / "view.qml"  # qml文件的路径
    view.setSource(QUrl.fromLocalFile(qml_file.resolve())) # 视图配置qml文件的加载路径

    #Show the window
    if view.status() == QQuickView.Error: # 加载qml是否正常没有出错
        sys.exit(-1)
    view.show()

    #execute and cleanup
    app.exec()
    del view