PyQt/PySide6快速入门 - 5 QML天气小程序（b）

上一篇： PyQt/PySide6快速入门 - 4 QML天气小程序（a） - 简书 (jianshu.com)

本期知识点：

• 前端（QML）和后端（Python/C++）如何通过信号或property交互
• 异步处理：JS ajax, Python Thread
• SwipeView组件

代码已更新：kevinqqnj/qml_weather: PySide6+QML weather App (github.com)

小程序运行演示视频：Qt QML+PySide天气小程序

image.png

前端（QML）和后端（Python/C++）如何通过信号、setProperty交互

从QML发送signal给后端，有四种方式：

1. QML调用Python slot函数

QML:

import kevinqqnj.signals.qmltopy1
 Console {
 id: pyConsole
 }
 onClicked: {
 pyConsole.output(mouse.x)
} 

PySide:

    QML_IMPORT_NAME = "kevinqqnj.signals.qmltopy1"
    @QmlElement
    class Console(QtCore.QObject):
        @QtCore.Slot(str)
        def output(self, s):
            print(s)

    view = QtDeclarative.QDeclarativeView()
    context = view.rootContext()
    context.setContextProperty("con", con)
# or: engine.rootObjects()[0].setProperty('backend', backend)

2. QML调用slot函数，并使用返回值

QML:

import kevinqqnj.signals.qmltopy1
 Console {
 id: pyConsole
 }
 onClicked: {
    helloText.rotation = rotatevalue.val()
}

PySide:

@QtCore.Slot(result=int)
def val(self):
    self.r = self.r + 10
    return self.r

3. Python通过engine.connect，访问QML signal

QML:

• 可在QML里隐藏Python class行为
• 但Python需要知道QML component的定义

Rectangle {
    id: page
    signal textRotationChanged(double rot)
    // make some other signal handler emit this signal:
onRotationChanged: textRotationChanged(rotation)

PySide:

view:
    root = view.rootObject()
    root.textRotationChanged.connect(sayThis)
Engine:
engine.rootObjects()[0].connect(sayThis)

4. Python通过ObjectName来直接访问某component的事件

QML: 给某个component定义ObjectName

MouseArea {
    id: buttonMouseArea
    objectName: "buttonMouseArea"
    anchors.fill: parent
}

PySide:

button = root.findChild(QtCore.QObject,"buttonMouseArea")
button.clicked.connect(lambda: sayThis("clicked button (signal directly connected)"))
button.setProperty("width", 100)

以上四种各有利弊，一般使用（3）

异步处理：JS ajax, Python Thread

QML可以直接import JavaScript脚本，然后使用其函数和变量。

• 使用ajax，异步访问当前城市的天气预报：
• 如果QML要访问本地文件，需要在PySide中声明：os.environ["QML_XHR_ALLOW_FILE_READ"] = "1"

function requestWeatherData(cntr) {
    var xhr = new XMLHttpRequest;
    xhr.open("GET", "weather.json");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            cntr.weatherData = JSON.parse(xhr.responseText)
        }
    }
    xhr.send();
}

QML也可以发信号给后端，让其抓取天气预报数据。后端再通过setProperty()发送回QML来显示

main.qml 发信号：

ApplicationWindow {

    signal updateWeather(int cityId)
。。。
    onLaunched: (cityId) => {
                        updateWeather(cityId)
                        root.isUpdating = true
                        stackView.push("WeatherPage.qml")
                        }

Python接收信号并处理：

• 使用全局变量engine root
• 通过connect来连接前端signal：root.updateWeather.connect()
• 通过threading.Thread来多线程执行，不阻塞QML运行
• 结果数据：通过root.setProperty('weatherData', weatherdata)，发送给QML
• 通过root.setProperty('isUpdating', False)，来告知QML，操作已完成

root = engine.rootObjects()[0]
root.updateWeather.connect(update_weather)

def update_weather(cityId):
    print('python: updating...', cityId)
    task = threading.Thread(target=getData, args=(cityId,))
    task.start()

def getData(cityId):
    global root, weatherdata
    try:
        url = f"http://t.weather.sojson.com/api/weather/city/{cityId}"
        print('start downloading... ', url)
        response = urllib.request.urlopen(url)
        data = json.loads(response.read().decode('utf-8'))
        weatherdata[str(cityId)] = data['data']['forecast'][0]
        weatherdata[str(cityId)]['cityInfo'] = data['cityInfo']
        weatherdata[str(cityId)]['UdateTime'] = data['time']

#       {'date': '07', 'high': '高温 29℃', 'low': '低温 17℃', 'ymd': '2022-06-07', 'week': '星期二',
#        'sunrise': '04:58', 'sunset': '19:09', 'aqi': 18, 'fx': '东北风', 'fl': '2级', 'type': '多云',
#        'notice': '阴晴之间，谨防紫外线侵扰', 'UdateTime': '2022-06-07 19:12:55'}
         # must have some delay, either urlopen or time.sleep, otherwize QML cannot update property
        time.sleep(1)
        print('downloaded, data len:', len(str(data)), weatherdata)
        root.setProperty('weatherData',  weatherdata)

    except Exception as e:
        print(e)

    root.setProperty('isUpdating', False)

QML：定义property，来接收Python数据

• weatherData：字典JSON格式数据
• isUpdating：布尔值，控制显示BusyIndicator（后台数据未返回前，显示转圈）

ApplicationWindow {
    property var weatherData: ({})
    property bool isUpdating: false

。。。
    BusyIndicator {
        id: busyIndicator
        visible: root.isUpdating
    }

• 旧数据暂存放在Settings变量里，以供离线访问：

    Component.onCompleted: {
        settings.savedWeatherData = root.weatherData
    }

SwipeView组件

手机上常见的多页面展示方法，在下方显示多个点，以指示当前有多个页面，可左右滑动切换。

下一篇：TBD