树莓派GUI远程开发-pyside2开发环境搭建

这里介绍在树莓派上使用Pyside2+QML方式进行GUI程序的开发，开发工具使用PyCharm和QtCreator两个IDE。

1、工具安装

1.1、PyCharm

可以安装PyCharm专业版，比较方便使用其远程调试功能。如果安装社区版，则需要利用其他工具将本地代码同步到远程树莓派，如sftp工具。

网址：https://www.jetbrains.com/pycharm/download/#section=windows

1.2、QtCreator

按照在线方法直接安装，然后加入到环境变量中，这里主要使用其QML设计功能。

网址：https://download.qt.io/official_releases/online_installers/

3、开发环境配置

3.1、PyCharm

pycharm的环境配置按照教程 使用PyCharm进行树莓派的远程开发-python 里的方法配置好!。

pycharm中打开qml文件

要在PyCharm中直接打开qml文件，需要配置外部工具，打开PyCharm的配置，在Tools->External Tools中添加QtCreator工具：配置完成后，即可在文件右键可以看到 Externa Tools -> QtCreator工具，如果没有显示，重启PyCharm或者查看配置是否错误。

3.2、树莓派pyside2

在树莓派端，需要安装Pyside2相关的qml库，执行如下命令进行安装：

sudo apt install qml-module-qtquick-shapes python3-pyside2.qtqml python3-pyside2.qtcore python3-pyside2.qtnetwork python3-pyside2.qtgui python3-pyside2.qtwidgets python3-pyside2.qtquick qtquickcontrols2-5-dev qml-module-qtcharts qml-module-qtquick-controls qml-module-qtquick-controls2

4、使用实例

4.1、新建工程

新建python工程，按照下图填写好工程路径、树莓派端文件路径，python interpreter为树莓派端的python3：
在工程文件夹右键新建python文件 main.py ：

文件内容如下：

import os
import sys
from pathlib import Path

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine

if __name__=="__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()

    engine.load(os.fspath(Path(__file__).resolve().parent / "ui/main.qml"))
    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec_())

再新建ui目录，并在ui目录下新建 main.qml 文件：
在main.qml 右键选择 external tool-> qtcreator，打开QtCreator进行编辑：
然后在QtCreator编辑器中编写qml文件：文件内容如下：

import QtQuick 2.10
import QtQuick.Window 2.1
import QtQuick.Controls 2.1

ApplicationWindow{
    id:root
    visible: true
    title: qsTr("test1")

    width: 800
    height: 480

    background: Rectangle{
        id:backgrnd
        color: "#3a3838"
        anchors.fill: parent
    }

    Text {
        id: tx
        color: "#322ec0"
        text: qsTr("Hello Raspberry Pi")
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.bold: true
        font.pointSize: 20
    }
}