QML登錄界面

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"
                    }
                }
            }
        }

    }

}