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中的打印输入
                }
            }
        }
    }
}

运行的结果