QML登录界面

Posted 2022-05-17 judes

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
ApplicationWindow 
    id: root
    visible: true
    width: Screen.width
    height: Screen.height
    title: qsTr("登录雷达作战系统")
    Component.onCompleted: 
        root.visibility = Window.Maximized
    
    Image 
        anchors.fill: parent
        source: "qrc:/img/earth.jpg"
    

    Item 
        width: 650
        height: 650
        anchors.centerIn: parent
        //一个圆形图片
        Item 
            width: parent.width
            height: parent.height
            Image 
                id: rdJpg
                anchors.centerIn: parent
                smooth: true
                visible: false
                source: "qrc:/img/rd.jpg"
            
            Rectangle 
                id: mask
                width: parent.width
                height: parent.height
                radius: width/2
                visible: false
            
            OpacityMask 
                anchors.fill: parent
                source: rdJpg
                maskSource: mask
            
        

        //用户输入
        Item 
            width: 250
            height: 100
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 100
            anchors.horizontalCenter: parent.horizontalCenter

            GridLayout 
                id: grid
                rows:2
                columns: 2
                width: 250
                height: 60
                columnSpacing: 10
                Text 
                    text: qsTr("用户名")
                    font.pointSize: 12
                    color: "black"
                
                TextField 
                    id: filedUsr
                    Layout.preferredHeight: 30
                
                Text 
                    text: qsTr("密码")
                    font.pointSize: 12
                    color: "black"
                
                TextField 
                    id: filedPawd
                    Layout.preferredHeight: 30
                
            

            //登录按钮
            Rectangle 
                id: logBtn
                width: 200
                height: 33
                color: "#6facf9"
                radius: 4
                border.width: 1
                border.color: "black"
                Text 
                    color: "#ffffff"
                    text: qsTr("登录")
                    anchors.centerIn: parent
                    font.pointSize: 12
                
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: grid.bottom
                anchors.topMargin: 40

                MouseArea 
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: 
                        logBtn.color = "#333333"
                    
                    onPressed: 
                        logBtn.color = "#111111"
                    
                    onReleased: 
                        logBtn.color = "#333333"
                    

                    onExited: 
                        logBtn.color = "#6facf9"