登录界面UI交互功能

1. 人脸、卡片、用户名密码和指纹等
2. 每个界面都相对应的输入框
3. 点击输入框外部区域取消输入框
Bug01: 点击用户输入框的取消按钮后无法外部区域无法取消该输入框

README.md

@@ -31,3 +31,11 @@
 - 基本配置信息
 
 - 用户信息、用户登录等功能
+
+# resources
+
+./src/resources
+
+- 图片、字体等相关静态资源
+
+find /home/kim/Desktop/ISCS_LOTO_Linux/src -type f -printf '%P\n' | grep png

src/CMakeLists.txt

@@ -32,13 +32,14 @@ FILE(GLOB LOTO_QML_FILES ${CMAKE_CURRENT_SOURCE_DIR}/qml/*.qml)
 list(APPEND ${LOTO_QML_FILES} main.qml)
 source_group("qml" FILES ${LOTO_QML_FILES})
 
+source_group("main" FILES main.cpp main.qml)
+
 add_executable(${PROJECT_NAME} main.cpp)
 
 qt_add_qml_module(${PROJECT_NAME}
     URI Loto
     VERSION 1.0
     OUTPUT_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
-    RESOURCE_PREFIX "/"
     QML_FILES
         main.qml
         qml/Login.qml
@@ -51,6 +52,48 @@ qt_add_qml_module(${PROJECT_NAME}
         usr/define.h
 )
 
+qt_add_resources(${PROJECT_NAME} "resources"
+    PREFIX "/"
+    FILES
+        resources/png/faceNotice.png
+        resources/png/inspection.png
+        resources/png/takeback.png
+        resources/png/error.png
+        resources/png/face.png
+        resources/png/instructions.png
+        resources/png/pdf_right.png
+        resources/png/title_damage.png
+        resources/png/min_button.png
+        resources/png/title_normal.png
+        resources/png/pdfImg.png
+        resources/png/fingerNotice.png
+        resources/png/finger.png
+        resources/png/exception.png
+        resources/png/user.png
+        resources/png/unknown.png
+        resources/png/backspace.png
+        resources/png/title_expire.png
+        resources/png/right.png
+        resources/png/exception_handle.png
+        resources/png/replacement.png
+        resources/png/main.ico
+        resources/png/metrial.png
+        resources/png/down.png
+        resources/png/pdf_left.png
+        resources/png/play.png
+        resources/png/user_title.png
+        resources/png/card.png
+        resources/png/cardNotice.png
+        resources/png/videoImg.png
+        resources/png/set.png
+        resources/png/allsel.png
+        resources/png/max_button.png
+        resources/png/bozz.png
+        resources/png/material.png
+
+        resources/fonts/fonts.txt
+)
+
 
 target_include_directories(${PROJECT_NAME} PRIVATE
     ${CMAKE_CURRENT_SOURCE_DIR}/httpclient

src/main.cpp

@@ -0,0 +1,21 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char** argv)
+{
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+
+    const QUrl url = QUrl(QStringLiteral("qrc:/Loto/main.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+                     &app, [url](QObject* obj, const QUrl& objUrl) {
+                         if (!obj && url == objUrl)
+                             QCoreApplication::exit(-1);
+                     }, Qt::QueuedConnection);
+
+    engine.load(url);
+
+    return app.exec();
+
+}

src/main.qml

@@ -1,6 +1,304 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
+import "./qml"
 
 ApplicationWindow {
     id: appWindow
+    visible: true
+    width: 1920
+    height: 1080
+
+    //visibility: Window.FullScreen       // 设置窗口为全屏
+    flags: Qt.FramelessWindowHint       // 设置窗口无边框
+
+    property bool showFaceLoginInput: false
+    property bool showCardLoginInput: false
+    property bool showPasswordLoginInput: false
+    property bool showFingerLoginInput: false
+
+    property var loginInputSize: []
+
+    Image {
+        id: __backgroundImage
+        x: 0
+        y: 0
+        width: parent.width
+        height: parent.height
+        source: "qrc:/resources/png/backspace.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Component.onCompleted: {
+
+    }
+
+    Item {
+        id: __contentItem
+        anchors.fill: parent
+
+        property bool canMouseOnScreen: false       // 点击屏幕是否可以取消登录界面
+
+        Image {
+            id: __logoImage
+            x: 73
+            y: 61
+            width: 200
+            height: 50
+            source: "qrc:/resources/png/bozz.png"
+            fillMode: Image.PreserveAspectFit
+            MouseArea {
+                anchors.fill: parent  // 让MouseArea覆盖整个Image区域
+                onClicked: {
+
+                }
+            }
+        }
+
+        Loader {
+            id: __login
+            anchors.top: __logoImage.bottom
+            anchors.centerIn: parent
+
+            sourceComponent: ColumnLayout {
+                id: __loginContent
+
+                Label {
+                    id: __titleLabel
+                    color: "#ddffffff"
+                    text: qsTr("物资管理系统")
+                    font.pixelSize: 80
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.bold: true
+
+                    Layout.alignment: Qt.AlignCenter
+                }
+
+                Row {
+                    id: __loginRow
+                    spacing: 10
+                    Layout.alignment: Qt.AlignCenter
+
+                    Loader {
+                        id: __loginFace
+                        x: 103
+                        y: 56
+
+                        sourceComponent: Login {
+                            icon.source: "qrc:/resources/png/face.png"
+                            text: qsTr("人脸登录")
+
+                            loginType: Login.Face
+                            isShowInput: showFaceLoginInput
+
+                            onClicked: {
+                                showFaceLoginInput = true;
+                                if (isShowInput !== showFaceLoginInput) {
+                                    isShowInput = true;
+                                }
+                                showCardLoginInput = false;
+                                showPasswordLoginInput = false;
+                                showFingerLoginInput = false;
+
+                                __contentItem.canMouseOnScreen = true;
+                                appWindow.loginInputSize = [width, height];
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: __loginCard
+                        x: 743
+                        y: 56
+
+                        sourceComponent: Login {
+                            icon.source: "qrc:/resources/png/card.png"
+                            text: qsTr("工卡登录")
+
+                            loginType: Login.Card
+                            isShowInput: showCardLoginInput
+
+                            onClicked: {
+                                showFaceLoginInput = false;
+                                showCardLoginInput = true;
+                                if (isShowInput !== showCardLoginInput) {
+                                    isShowInput = true;
+                                }
+                                showPasswordLoginInput = false;
+                                showFingerLoginInput = false;
+
+                                __contentItem.canMouseOnScreen = true;
+                                appWindow.loginInputSize = [width, height];
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: __loginPassword
+                        x: 423
+                        y: 56
+
+                        sourceComponent: Login {
+                            id: __loginInputPassword
+                            icon.source: "qrc:/resources/png/user.png"
+                            text: qsTr("用户名登录")
+
+                            loginType: Login.Password
+                            isShowInput: showPasswordLoginInput
+
+                            onClicked: {
+                                showFaceLoginInput = false;
+                                showCardLoginInput = false;
+                                showPasswordLoginInput = true;
+                                if (isShowInput !== showPasswordLoginInput) {
+                                    isShowInput = true;
+                                }
+                                showFingerLoginInput = false;
+
+                                __contentItem.canMouseOnScreen = true;
+                                appWindow.loginInputSize = [width, height];
+                            }
+
+                            Connections {
+                                target: __loginInputPassword
+                                function onIsShowInputChanged() {
+                                    if (!__loginInputPassword.isShowInput && showPasswordLoginInput) {
+                                        console.log(__loginInputPassword.isShowInput, showPasswordLoginInput)
+                                        showPasswordLoginInput = false;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: __loginFinger
+                        x: 1063
+                        y: 56
+
+                        sourceComponent: Login {
+                            icon.source: "qrc:/resources/png/finger.png"
+                            text: qsTr("指纹登录")
+
+                            loginType: Login.Finger
+                            isShowInput: showFingerLoginInput
+
+                            onClicked: {
+                                showFaceLoginInput = false;
+                                showCardLoginInput = false;
+                                showPasswordLoginInput = false;
+                                showFingerLoginInput = true;
+                                if (isShowInput !== showFingerLoginInput) {
+                                    isShowInput = true;
+                                }
+
+                                __contentItem.canMouseOnScreen = true;
+                                appWindow.loginInputSize = [width, height];
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    opacity: 0
+                    height: 200
+                }
+
+                Label {
+                    id: __loginNotice
+                    Layout.alignment: Qt.AlignCenter
+                    width: 1920
+                    color: "#ffffff"
+                    text: qsTr("您可以通过刷卡或者指纹直接登录系统")
+                    font.pixelSize: 42
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.bold: true
+                }
+            }
+        }
+
+        // 以下四个MouseArea是为了点击屏幕可以取消登录输入界面而存在
+        MouseArea {
+            id: __contentItemMouseArea1
+            width: appWindow.loginInputSize[0]
+            height: parent.height
+            anchors.left: parent.left
+            visible: __contentItem.canMouseOnScreen
+
+            onClicked: {
+                clickSreenToCancelInput();
+            }
+        }
+
+        MouseArea {
+            id: __contentItemMouseArea2
+            width: parent.height
+            height: (parent.height - appWindow.loginInputSize[1]) / 2
+            anchors.top: parent.top
+            visible: __contentItem.canMouseOnScreen
+
+            onClicked: {
+                clickSreenToCancelInput();
+            }
+        }
+
+        MouseArea {
+            id: __contentItemMouseArea3
+            width: appWindow.loginInputSize[0]
+            height: parent.height
+            anchors.right: parent.right
+            visible: __contentItem.canMouseOnScreen
+
+            onClicked: {
+                clickSreenToCancelInput();
+            }
+        }
+
+        MouseArea {
+            id: __contentItemMouseArea4
+            width: parent.width
+            height: (parent.height - appWindow.loginInputSize[1]) / 2
+            anchors.bottom: parent.bottom
+            visible: __contentItem.canMouseOnScreen
+
+            onClicked: {
+                clickSreenToCancelInput();
+            }
+        }
+    }
+
+    onShowFaceLoginInputChanged: {
+        if (!showFaceLoginInput && __contentItem.canMouseOnScreen) {
+            __contentItem.canMouseOnScreen = false;
+        }
+    }
+
+    onShowCardLoginInputChanged: {
+        if (!showCardLoginInput && __contentItem.canMouseOnScreen) {
+            __contentItem.canMouseOnScreen = false;
+        }
+    }
+
+    onShowPasswordLoginInputChanged: {
+        if (!showPasswordLoginInput && __contentItem.canMouseOnScreen) {
+            __contentItem.canMouseOnScreen = false;
+        }
+    }
+
+    onShowFingerLoginInputChanged: {
+        if (!showFingerLoginInput && __contentItem.canMouseOnScreen) {
+            __contentItem.canMouseOnScreen = false;
+        }
+    }
+
+    function clickSreenToCancelInput() {
+        showFaceLoginInput = false;
+        showCardLoginInput = false;
+        showPasswordLoginInput = false;
+        showFingerLoginInput = false;
+
+        appWindow.loginInputSize = [__contentItem.width, __contentItem.height];
+    }
 }

src/qml/Login.qml

@@ -1,5 +1,330 @@
 import QtQuick
+import QtQuick.Controls
 
-Item {
+Button {
     id: control
+    width: 300
+    height: 400
+    visible: true
+
+    enum LoginType {
+        None = 0,
+        Face,
+        Card,
+        Password,
+        Finger
+    }
+
+    property int loginType: Login.None
+    property bool isShowInput: false
+    property int centerX: 711 - control.x - 300 - 40
+    property int centerY: 371 - control.y - 400 + 60
+
+    property Component faceInputDelegate: Rectangle {
+        id: __faceInput
+        x: -control.x + width * 1.25
+        y: -control.y
+        width: 350
+        height: 350
+        color: "#980e57ea"
+        radius: 20
+
+        Column {
+            x: 0
+            y: 0
+            width: 350
+            height: 350
+            visible: true
+            spacing: 30
+            padding: 0
+            topPadding: 46
+
+            Image {
+                width: 200
+                height: 200
+                opacity: 0.5
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: "qrc:/resources/png/faceNotice.png"
+            }
+
+            Label {
+                id: cardNotice
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "#9affffff"
+                text: qsTr("请刷人脸")
+                font.pixelSize: 30
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font.bold: true
+            }
+        }
+    }
+    property Component cardInputDelegae: Rectangle {
+        id: cardInput
+        x: -control.x + width * 0.5
+        y: -control.y
+        width: 350
+        height: 350
+        color: "#980e57ea"
+        radius: 20
+
+        Column {
+            x: 0
+            y: 0
+            width: 350
+            height: 350
+            spacing: 30
+            padding: 0
+            topPadding: 46
+
+            Image {
+                width: 200
+                height: 200
+                opacity: 0.5
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: "qrc:/resources/png/cardNotice.png"
+            }
+
+            Label {
+                id: faceNotice
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "#9affffff"
+                text: qsTr("请刷工卡")
+                font.pixelSize: 30
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font.bold: true
+            }
+        }
+    }
+    property Component passwordInputDelegate: Rectangle {
+        id: __passwordInput
+        x: -control.x - width * 0.5
+        y: -control.y
+        width: 497
+        height: 438
+        color: "#980e57ea"
+        radius: 20
+
+        Column {
+            id: __passwordColumn
+            x: 0
+            y: 0
+            width: 497
+            height: 438
+            spacing: 30
+            padding: 0
+            topPadding: 46
+
+            Rectangle {
+                x: 72
+                width: 353
+                height: 68
+                color: "#00ffffff"
+                border.color: "#a3ffffff"
+                border.width: 3
+                radius: 10
+
+                TextField {
+                    id: usernameText
+                    anchors.fill: parent
+                    anchors.margins: 2
+                    font.pointSize: 15
+                    focus: false
+                    color: "#a3ffffff"
+                    background: Rectangle {
+                        color: "transparent" // 使TextField背景透明
+                    }
+                    placeholderText: qsTr("请输入用户名")
+                    font.pixelSize: 30
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    wrapMode: Text.NoWrap
+                    selectionColor: "#a300aaff"
+                    placeholderTextColor: "#60ffffff"
+                    bottomPadding: 5
+                    topPadding: 5
+                    rightPadding: 20
+                    leftPadding: 20
+                    renderType: Text.QtRendering
+                    font.styleName: "Regular"
+                }
+            }
+
+            Rectangle {
+                x: 72
+                width: 353
+                height: 68
+                color: "#00ffffff"
+                border.color: "#a3ffffff"
+                border.width: 3
+                radius: 10
+
+                TextField {
+                    id: passwordText
+                    anchors.fill: parent
+                    anchors.margins: 2
+                    font.pointSize: 15
+                    focus: false
+                    color: "#a3ffffff"
+                    background: Rectangle {
+                        color: "transparent" // 使TextField背景透明
+                    }
+                    placeholderText: qsTr("请输入密码")
+                    echoMode: TextInput.Password // 设置echoMode为Password
+                    font.pixelSize: 30
+                    selectionColor: "#a300aaff"
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    wrapMode: Text.NoWrap
+                    placeholderTextColor: "#60ffffff"
+                    bottomPadding: 5
+                    topPadding: 5
+                    rightPadding: 20
+                    leftPadding: 20
+                    renderType: Text.QtRendering
+                    font.styleName: "Regular"
+                }
+            }
+
+            Button {
+                id: __buttonEnter
+                x: 72
+                width: 353
+                height: 68
+                text: qsTr("登录")
+                contentItem: Label {
+                    id: label3
+                    text: parent.text
+                    font.pixelSize: 30
+                    color: "#a3ffffff" // 设置字体颜色
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+                background: Rectangle {
+                    color: "#a300aaff"
+                    radius: 10 // 设置圆角半径
+                }
+
+                Connections {
+                    target: __buttonEnter
+                    function onClicked() {
+                        username_login();
+                    }
+                }
+            }
+
+            Button {
+                id: __buttonCancel
+                x: 72
+                width: 353
+                height: 68
+                text: qsTr("取消")
+                contentItem: Label {
+                    text: parent.text
+                    font.pixelSize: 30
+                    color: "#a3ffffff" // 设置字体颜色
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+                background: Rectangle {
+                    color: "#00ffffff"
+                    border.color: "#a3ffffff"
+                    border.width: 3
+                    radius: 10 // 设置圆角半径
+                }
+
+                Connections {
+                    target: __buttonCancel
+                    function onClicked() {
+                        isShowInput = false;
+                    }
+                }
+            }
+        }
+    }
+    property Component fingerInputDelegate: Rectangle {
+        id: fingerInput
+        x: -control.x - width * 1.25
+        y: -control.y
+        width: 350
+        height: 350
+        color: "#980e57ea"
+        radius: 20
+
+        Column {
+            x: 0
+            y: 0
+            width: 350
+            height: 350
+            visible: true
+            spacing: 30
+            padding: 0
+            topPadding: 46
+
+            Image {
+                width: 200
+                height: 200
+                opacity: 0.5
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: "qrc:/resources/png/fingerNotice.png"
+            }
+
+            Label {
+                id: fingerNotice
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "#9affffff"
+                text: qsTr("请刷指纹")
+                font.pixelSize: 30
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font.bold: true
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: __background
+        color: "#982b7ae9"
+        border.color: "#4c2b7ae9"
+        border.width: 2                         // 边框宽度
+        radius: 20                              // 可选，设置圆角
+    }
+    icon.height: 150
+    icon.width: 120
+    display: AbstractButton.TextUnderIcon
+    icon.source: ""
+    icon.color: "#00ffffff"
+    text: ""
+    font.pixelSize: 40
+    spacing: 20
+    palette.buttonText: "#7fffffff"             // 设置字体颜色为绿
+    activeFocusOnTab: false
+
+    Loader {
+        id: __loginInput
+    }
+
+    onIsShowInputChanged: {
+        if (!isShowInput)
+            console.log(__loginInput.sourceComponent)
+            __loginInput.sourceComponent = null;
+            console.log(__loginInput.sourceComponent)
+        if (isShowInput)
+            if (loginType === Login.Face) {
+                // TODO: 人脸检测任务
+                console.log("人脸检测");
+                __loginInput.sourceComponent = faceInputDelegate;
+            } else if (loginType === Login.Card) {
+                __loginInput.sourceComponent = cardInputDelegae;
+            } else if (loginType === Login.Password) {
+                __loginInput.sourceComponent = passwordInputDelegate;
+            } else if (loginType === Login.Finger) {
+                __loginInput.sourceComponent = fingerInputDelegate;
+            }
+    }
+
+    function username_login() {
+
+    }
 }

src/resource.qrc

@@ -0,0 +1,39 @@
+<RCC>
+    <qresource prefix="/">
+        <file>resources/png/allsel.png</file>
+        <file>resources/png/backspace.png</file>
+        <file>resources/png/bozz.png</file>
+        <file>resources/png/card.png</file>
+        <file>resources/png/cardNotice.png</file>
+        <file>resources/png/down.png</file>
+        <file>resources/png/error.png</file>
+        <file>resources/png/exception.png</file>
+        <file>resources/png/exception_handle.png</file>
+        <file>resources/png/face.png</file>
+        <file>resources/png/faceNotice.png</file>
+        <file>resources/png/finger.png</file>
+        <file>resources/png/fingerNotice.png</file>
+        <file>resources/png/inspection.png</file>
+        <file>resources/png/instructions.png</file>
+        <file>resources/png/main.ico</file>
+        <file>resources/png/material.png</file>
+        <file>resources/png/max_button.png</file>
+        <file>resources/png/metrial.png</file>
+        <file>resources/png/min_button.png</file>
+        <file>resources/png/pdfImg.png</file>
+        <file>resources/png/pdf_left.png</file>
+        <file>resources/png/pdf_right.png</file>
+        <file>resources/png/play.png</file>
+        <file>resources/png/replacement.png</file>
+        <file>resources/png/right.png</file>
+        <file>resources/png/set.png</file>
+        <file>resources/png/takeback.png</file>
+        <file>resources/png/title_damage.png</file>
+        <file>resources/png/title_expire.png</file>
+        <file>resources/png/title_normal.png</file>
+        <file>resources/png/unknown.png</file>
+        <file>resources/png/user.png</file>
+        <file>resources/png/user_title.png</file>
+        <file>resources/png/videoImg.png</file>
+    </qresource>
+</RCC>

src/resources/fonts/fonts.txt

@@ -0,0 +1 @@
+Fonts in this folder are loaded automatically.