本文共 4358 字，大约阅读时间需要 14 分钟。

TextField在Qml开发过程中作为输入框经常用到，本篇介绍以TextField作为密码输入框的使用示例：

其中有几点重要的属性需要用到，

placeholderText：内容为空时提示文字selectByMouse：鼠标选择，这个比较实用，比如说，输入了密码错了，可以全选一次删除selectionColor：选中的颜色echoMode：模式,如果设置密码模式输入密码后显示的是圆点

下面是完整使用的代码：

import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.12Window {    visible: true    width: 500    height: 400    title: qsTr("Hello World")    Rectangle {        id: changePasswordRect        anchors.fill: parent        color: "#373250";        MouseArea {            id: tempMouse            anchors.fill: parent;            onClicked: {                console.log("tempMouse====================================")            }        }        //请输入原密码        TextField {            id: inputOrgPasswd            anchors.top: parent.top; anchors.topMargin: 60            anchors.left: parent.left; anchors.leftMargin: 110            verticalAlignment: Text.AlignVCenter            font.pixelSize: 12            font.family: "微软雅黑"            color: "white" //"#B2B2B2"            cursorVisible: true;            selectByMouse: true //是否可以选择文本            selectionColor: "#999999"//选中背景颜色            placeholderText: qsTr("请输入原密码")            width: 280; height: 40;            background: Rectangle {                border.width: 0; //border.color: "#B2B2B2"                radius: 4; color: "#FFFFFF" //"transparent"                opacity: 0.05                implicitHeight: 40; implicitWidth: 280            }        }        //请输入新密码        TextField {            id: inputNewPasswd            anchors.top: parent.top; anchors.topMargin: 120            anchors.left: parent.left; anchors.leftMargin: 110;            verticalAlignment: Text.AlignVCenter            font.pixelSize: 12;            font.family: "微软雅黑"            color: "white"            //cursorVisible: true;            selectByMouse: true //是否可以选择文本            selectionColor: "#999999"//选中背景颜色            placeholderText: qsTr("请输入新密码")            width: 280; height: 40;            background: Rectangle {                border.width: 0; border.color: "red"                radius: 4; color: "#FFFFFF";                opacity: 0.05                implicitHeight: 40; implicitWidth: 280            }        }        //请输入新密码        TextField {            id: inputPasswdAgain            anchors.top: parent.top; anchors.topMargin:180            anchors.left: parent.left; anchors.leftMargin: 110            verticalAlignment: Text.AlignVCenter            font.pixelSize: 12;            font.family: "微软雅黑"            color: "white"            //cursorVisible: true;            selectByMouse: true //是否可以选择文本            selectionColor: "#999999"//选中背景颜色            placeholderText: qsTr("请再次输入新密码")//占位文字            echoMode: TextInput.Password //密码模式            width: 280; height: 40            background: Rectangle {                border.width: 0; border.color: "red"                radius: 4; color: "#FFFFFF";                opacity: 0.05                implicitHeight: 40; implicitWidth: 280            }        }        //确认按钮        Rectangle {            id: confirmButtonRect            width: 280; height: 48;            color: "#FF5362"            radius: 4            anchors.top: parent.top; anchors.topMargin: 263            anchors.left: parent.left; anchors.leftMargin: 110            Text {                id: confirmText                width: parent.width; height: 22                color: "#FFFFFF"                font.pixelSize: 16                font.family: "微软雅黑"                anchors.centerIn: parent                text: qsTr("确认")                anchors.horizontalCenter: parent.horizontalCenter                horizontalAlignment: Text.AlignHCenter            }            MouseArea {                id: changePasswdConfirmMouse                anchors.fill: parent;                onClicked: {                    var orgPasswd = inputOrgPasswd.text;                    var newPasswd = inputNewPasswd.text;                    var newPasswdAgain = inputPasswdAgain.text                    console.log("changePasswdConfirmMouse=orgPasswd=" + orgPasswd + "=newPasswd=" + newPasswd + "=newPasswdAgain=" + newPasswdAgain)                }            }        }        function initChangePasswordUI()        {            inputOrgPasswd.text = "";            inputNewPasswd.text = "";            inputPasswdAgain.text = "";        }    }}

转载地址：http://xwiub.baihongyu.com/