qml之TextField使用笔记

最新推荐文章于 2025-03-31 20:20:26 发布

班公湖里洗过脚

最新推荐文章于 2025-03-31 20:20:26 发布

阅读量9.9k

点赞数 8

分类专栏： qml 文章标签： qml

本文链接：https://blog.csdn.net/chenyijun/article/details/104172552

版权

qml 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍使用QML开发过程中的TextField组件作为密码输入框的应用示例，包括关键属性如placeholderText、selectByMouse、selectionColor及echoMode的设置，通过具体代码展示如何创建安全的密码输入界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

下面是完整使用的代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    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 = "";
        }

    }

}