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

目录

一、Qt Design Studio

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

三、QRC转换成py

1.删除Constants.qml中的

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

3.转换

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

---

一、Qt Design Studio

/*
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文件名称）

三、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.转换

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

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()