Qt-Examples/src/PasswordInputQuick/PasswordInput.qml at master · RealChuan/Qt-Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import QtQuick
import QtQuick.Controls

Rectangle {
    id: root
    width: 300
    height: 50
    border.color: textInput.activeFocus ? "#0078d4" : "#cccccc"
    border.width: textInput.activeFocus ? 2 : 1

    // 公共属性
    property alias text: textInput.text
    property string placeholderText: qsTr("Enter password")
    property alias maximumLength: textInput.maximumLength
    property alias validator: textInput.validator
    property bool passwordVisible: false

    // 图标属性 - 可以使用字体图标或图片路径
    property string visibleIcon: "👁️"  // Show password icon
    property string hiddenIcon: "🔒"   // Hide password icon

    // 信号
    signal editingFinished

    // 输入框容器
    Item {
        id: textInputContainer
        anchors {
            left: parent.left
            right: toggleButton.left
            verticalCenter: parent.verticalCenter
            margins: 12
        }
        height: parent.height

        // 占位符文本
        Text {
            id: placeholder
            anchors.fill: parent
            text: root.placeholderText
            color: "#999999"
            font.pixelSize: 14
            verticalAlignment: Text.AlignVCenter
            visible: textInput.text.length === 0 && !textInput.activeFocus
        }

        // 文本输入框
        TextInput {
            id: textInput
            anchors.fill: parent
            echoMode: root.passwordVisible ? TextInput.Normal : TextInput.Password
            selectByMouse: true
            clip: true
            font.pixelSize: 14
            verticalAlignment: Text.AlignVCenter

            // 密码验证 - 只允许可打印ASCII字符
            validator: RegularExpressionValidator {
                regularExpression: /[\x20-\x7E]+/
            }

            onEditingFinished: root.editingFinished()

            // 当获得焦点时隐藏占位符
            onActiveFocusChanged: {
                if (activeFocus) {
                    placeholder.visible = false;
                } else if (text.length === 0) {
                    placeholder.visible = true;
                }
            }

            // 当文本变化时更新占位符可见性
            onTextChanged: {
                if (text.length > 0) {
                    placeholder.visible = false;
                } else if (!activeFocus) {
                    placeholder.visible = true;
                }
            }
        }
    }

    // 显示/隐藏密码按钮
    Rectangle {
        id: toggleButton
        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
            rightMargin: 8
        }
        width: 32
        height: 32
        radius: 4
        color: mouseArea.containsPress ? "#e0e0e0" : mouseArea.containsMouse ? "#f5f5f5" : "transparent"

        // 图标显示
        Text {
            id: iconText
            anchors.centerIn: parent
            text: root.passwordVisible ? root.visibleIcon : root.hiddenIcon
            font.pixelSize: 16
        }

        // 点击区域
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: {
                root.togglePasswordVisibility();
            }
        }

        // 按钮提示
        ToolTip {
            id: buttonToolTip
            text: root.passwordVisible ? qsTr("Hide password") : qsTr("Show password")
            delay: 500
        }
    }

    // 方法
    function togglePasswordVisibility() {
        root.passwordVisible = !root.passwordVisible;
    }

    function setToggleIcons(visibleIcon, hiddenIcon) {
        root.visibleIcon = visibleIcon;
        root.hiddenIcon = hiddenIcon;
    }

    function clear() {
        textInput.clear();
        placeholder.visible = true;
    }

    function selectAll() {
        textInput.selectAll();
    }

    // 组件加载完成后的初始化
    Component.onCompleted: {
        // 设置初始状态
        root.passwordVisible = false;
    }
}