Qt第五十五章：Qt Design Studio设计登录页并打包到python运行

本是古典何须时尚 2024-03-30 13:41 61阅读 0赞

**目录**

一、Qt Design Studio

二、导出所有文件到QRC（不要改动默认的QRC文件名称）

三、QRC转换成py

1.删除Constants.qml中的

2.将App.qml和Screen01.qml中的

3.转换

4、将QRC文件和转换后的py文件，复制到python项目中使用。

--------------------

### 一、Qt Design Studio ###

![7649e3d8311847ca93ef2d9fad40ef68.png][]

/*
    This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
    It is supposed to be strictly declarative and only uses a subset of QML. If you edit
    this file manually, you might introduce QML code that is not supported by Qt Design Studio.
    Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
    */
    import QtQuick 6.2
    import QtQuick.Controls 6.2
    import UntitledProject
    
    Rectangle {
        width: Constants.width
        height: Constants.height
    
        color: Constants.backgroundColor
        scale: 1
        AnimatedImage {
            id: v233ef8aa204a741d9472bfe93b618bbd5_b
            x: 0
            y: 0
            source: "images/v2-33ef8aa204a741d9472bfe93b618bbd5_b.gif"
            fillMode: Image.PreserveAspectFit
    
            Button {
                id: button_login
                width: 200
                height: 30
                text: qsTr("登录")
                anchors.verticalCenter: textInput_password.verticalCenter
                font.wordSpacing: 0
                font.pointSize: 12
                font.bold: true
                anchors.verticalCenterOffset: 80
                //水平居中
                anchors.horizontalCenter: parent.horizontalCenter
                //内边距
                rightPadding: 0
                bottomPadding: 0
                leftPadding: button_login.pressed?2:0
                topPadding: button_login.pressed?2:0
                //点击事件
                onClicked: console.log("点击了")
    
                //重写Rectangle来设置背景
                background: Rectangle  {
                    //透明度
                    opacity: 0.3
                    //圆角
                    radius: 20
                    //抗锯齿
                    antialiasing: true
                    //边框宽度
                    border.width: button_login.pressed?3:1
                    //边框颜色
                    border.color: button_login.pressed?"blue":"#ffffff"
                    //背景颜色
                    color: {
                        if (button_login.pressed|button_login.hovered) {
                            //悬停或按下状态颜色
                            Qt.rgba(0,0,0,100)
                        } else {
                            //静态颜色
                            "#ffffff"
                        }
                    }
                }
                //重写Text来设置字体颜色
                contentItem:Text {
                    text: button_login.text
                    color: button_login.pressed|button_login.hovered?"white":"black"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
    
            TextField {
                id: textInput_username
                //悬停或获取焦点 放大输入框
                width: textInput_username.activeFocus|textInput_username.hovered?205:200
                height: textInput_username.activeFocus|textInput_username.hovered?35:30
                anchors.verticalCenter: textInput_password.verticalCenter
                font.pixelSize: 12
                //字体白色
                color: 'white'
                placeholderText: "账号"
                anchors.verticalCenterOffset: -50
                anchors.horizontalCenterOffset: 0
                //水平居中
                anchors.horizontalCenter: textInput_password.horizontalCenter
                //重写Rectangle设置背景
                background: Rectangle  {
                    //透明度
                    opacity: 0.3
                    //圆角
                    radius: 20
                    //抗锯齿
                    antialiasing: true
                    //边框宽度
                    border.width: textInput_username.activeFocus?2:0
                    //边框颜色
                    border.color: textInput_username.activeFocus?"blue":"#ffffff"
                }
    
            }
    
            TextField {
                id: textInput_password
                //悬停或获取焦点 放大输入框
                width: textInput_password.activeFocus|textInput_password.hovered?205:200
                height: textInput_password.activeFocus|textInput_password.hovered?35:30
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 12
                //字体白色
                color: 'white'
                placeholderText: "密码"
    //            placeholderTextColor: "black"
                echoMode: "Password"
                //水平居中
                anchors.horizontalCenter: parent.horizontalCenter
                //重写Rectangle 设置背景
                background: Rectangle  {
                    //透明度
                    opacity: 0.3
                    //圆角
                    radius: 20
                    //抗锯齿
                    antialiasing: true
                    //边框宽度
                    border.width: textInput_password.activeFocus?2:0
                    //边框颜色
                    border.color: textInput_password.activeFocus?"blue":"#ffffff"
                }
    
            }
        }
    }

### 二、导出所有文件到QRC（不要改动默认的QRC文件名称） ###

![51f553aba0cc44fcbfd05c9fbeac32f6.png][]

### 三、QRC转换成py ###

将导包换成导入qrc资源：

#### 1.删除Constants.qml中的 ####

import QtQuick.Studio.Application

property StudioApplication application: StudioApplication {
        fontPath: Qt.resolvedUrl("../../content/" + relativeFontDirectory)
    }

#### 2.将App.qml和Screen01.qml中的 ####

import UntitledProject换成下面（注意：冒号前的qrc不能少，用英文单引号包起来）

import 'qrc:/imports/UntitledProject'

#### 3.转换 ####

![abf8278e2bae44c085d7e7818048dabe.png][]

#### 4、将QRC文件和转换后的py文件，复制到python项目中使用。 ####

![4c897e0e38c9429aadfb144d3bbd46ec.png][]

import sys
    
    from PySide6.QtCore import QObject, Slot
    from PySide6.QtQml import QQmlApplicationEngine
    from PySide6.QtQuick import QQuickItem
    from PySide6.QtWidgets import QApplication
    import UntitledProject_rc
    
    
    # 槽函数类（一个承载槽函数的容器类）
    class Slots(QObject):
        def __init__(self, objects):
            self.objects = objects
            super().__init__()
    
        @Slot(str, result=None)
        def set_text_msg(self, msg):
            # 获取qml中的Text对象
            child = self.objects[0].findChild(QQuickItem, "text1")
            # 获取对象属性
            p = child.property("text")
            # 设置对象属性
            child.setProperty("text", p + msg)
    
        @Slot(result=str)
        def get_text_msg(self):
            return "皎氯"
    
    
    """
    这种方式是以Qml作为窗口来使用。所有的逻辑UI都由Qml来完成。python提供可以调用数据的API即可。
    """
    
    
    class LoginQuickWidget:
        def __init__(self):
            # 初始化UI
            self.engine = QQmlApplicationEngine()
            # 加载qml文件
            self.engine.load(u":/content/App.qml")
            if not self.engine.rootObjects():
                sys.exit(-1)
            # qml对象集合
            objects = self.engine.rootObjects()
            # 实例化槽函数
            self.slots = Slots(objects)
            # 注入槽函数
            self.engine.rootContext().setContextProperty('slots', self.slots)
    
    
    if __name__ == '__main__':
        app = QApplication([])
        quick_widget = LoginQuickWidget()
        app.exec()

![57c0b027b5e14c37984a1fc2c28cab9f.png][]

[7649e3d8311847ca93ef2d9fad40ef68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6fe84b11bcf94090aa978e74a6eb748c.png
[51f553aba0cc44fcbfd05c9fbeac32f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7efe77d2b4b64eff9c17e4ade58036ac.png
[abf8278e2bae44c085d7e7818048dabe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a75a439349b940028158cb1c56c0d847.png
[4c897e0e38c9429aadfb144d3bbd46ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/27bfbd52d01f4863a46c455c07dfaad0.png
[57c0b027b5e14c37984a1fc2c28cab9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6532eee9b2a34fd7934da07e73593329.png