QT quick中的登錄界面（Rectangle，TextField文本框的使用）

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    id: win1
    width: 640
    height: 480
    visible: true
    //property var name  利用property來在qml中聲明全局變量
    //property string name1:""
    // property double sum
    //property bool name4
    title: qsTr("設置窗體頭標題")
    Rectangle {
        id: rectangle
        color: "#ffffff"
        visible: true
        anchors.fill: parent
        
        Text {
            id: element1
            x: 184
            y: 211
            width: 43
            height: 40
            text: qsTr("密碼 :")
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 20
        }
        Text {
            id: element
            x: 184
            y: 126
            width: 43
            height: 40

            text: qsTr("用戶名 :")
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 20
        }
        Text {
            id: element5
            x: 233
            y: 172
            width: 200
            height: 22
            color: "#e90d0d"
            text: qsTr("")
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 15
        }
        Text {
            id: element6
            x: 233
            y: 257
            width: 200
            height: 24
            color: "#f30707"
            text: qsTr("")
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 12
        }

        TextField {
            id: textField1
            x: 233
            y: 126
            text: qsTr("")
            focus: true
            selectByMouse: true//鼠標選擇，可以進行文本的全選複製操作
            placeholderText : "請輸入用戶名 "
//            preeditText :qsTr("")
        }

        TextField {
            id: textField2
            x: 233
            y: 211
            text: qsTr("")
            activeFocusOnPress :true
            passwordCharacter: "*"
            echoMode: TextField.Password//用來表示這是Password模式下我們可以利用passwordCharacter對輸入的內容進行隱藏
            placeholderText : "請輸入密碼 "//佔位符用來顯示輸入框中顯示的提醒內容
            selectByMouse: true
        }
        Button {
            id: button2
            x: 184
            y: 315
            width: 222
            height: 60
            text: qsTr("登錄")
            font.pointSize: 23
            
            MouseArea {
                id: mouseArea1
                anchors.fill: parent
                //鼠標點擊事件
                onClicked: {
                    console.log()//qml中的打印輸入
                }
            }
        }
    }
}

運行的結果