将文本附加到 TextInput

Question

我正在处理 QML PIN 条目 Item，如以下屏幕截图所示：

现在，在 Item 的底部有 QML TextInput 字段，从 UeKeypad 的代码中可以看出，名为 ueKeypadPinFieldField:

import QtQuick 2.0
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.3

import "../items"

Item
{
    id: ueKeypad

    property string ueParamWorkerImage
    property string ueParamWorkerName

    width: 512
    height: 512
    antialiasing: true

    Rectangle
    {
        id: ueKeypadWrapper
        radius: 16
        border.color: "#4682b4"
        border.width: 1
        antialiasing: true

        anchors.fill: parent

        gradient: Gradient
        {
            GradientStop
            {
                position: 0
                color: "#636363"
            }   // GradientStop

            GradientStop
            {
                position: 1
                color: "#303030"
            }   // GradientStop
        }   // Gradient

        ColumnLayout
        {
            id: ueKeypadLayoutMain
            antialiasing: true

            layoutDirection: Qt.LeftToRight

            spacing: 8

            anchors.fill: parent

            ColumnLayout
            {
                id: ueKeypadTitleLayout

                layoutDirection: Qt.LeftToRight

                Layout.fillWidth: true

                Layout.minimumHeight: 24
                Layout.preferredHeight: 24
                Layout.maximumHeight: 24
                Layout.margins: 8

                Text
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    text: qsTr("PIN ENTRY")
                    clip: true
                    font.bold: true
                    font.pointSize: 24
                    textFormat: Text.RichText
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }   // Text
            }   // ColumnLayout

            ColumnLayout
            {
                id: ueUserInfoLayout

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.margins: 8

                Image
                {
                    id: ueKeypadWorkerImage
                    clip: true
                    fillMode: Image.PreserveAspectFit

                    source: ueParamWorkerImage

                    Layout.fillWidth: true

                    Layout.minimumHeight: 96
                    Layout.preferredHeight: 96
                    Layout.maximumHeight: 96
                    Layout.alignment: Qt.AlignCenter
                }   // Image

                Text
                {
                    id: ueKeypadWorkerName
                    color: "#ffffff"
                    text: qsTr("TEST")

                    enabled: false
                    antialiasing: true

                    font.bold: false
                    font.pointSize: 24

                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }   // Text
            }   // ColumnLayout

            GridLayout
            {
                id: ueKeypadNumbersLayout

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.margins: 8

                Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                layoutDirection: Qt.LeftToRight

                columnSpacing: 8
                rowSpacing: 8

                flow: GridLayout.LeftToRight

                columns: 3

                UeButton
                {
                    id: ueKeypadButton1

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("1")
                    //ueKeypadPinFieldField.text: ueKeypadPinFieldField.text+"1"
                }

                UeButton
                {
                    id: ueKeypadButton2

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("2")
                }

                UeButton
                {
                    id: ueKeypadButton3

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("3")
                }

                UeButton
                {
                    id: ueKeypadButton4

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("4")
                }

                UeButton
                {
                    id: ueKeypadButton5

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("5")
                }

                UeButton
                {
                    id: ueKeypadButton6

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("6")
                }

                UeButton
                {
                    id: ueKeypadButton7

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("7")
                }

                UeButton
                {
                    id: ueKeypadButton8

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("8")
                }

                UeButton
                {
                    id: ueKeypadButton9

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("9")
                }

                UeButton
                {
                    id: ueKeypadButton0

                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.columnSpan: 3

                    ueText: qsTr("0")

                }   // UeButton
            }   // GridLayout

            RowLayout
            {
                id: ueKeypadPinFieldLayout
                antialiasing: true

                Layout.fillWidth: true
                Layout.fillHeight: true

                TextInput
                {
                    id: ueKeypadPinFieldField
                    cursorVisible: false
                    enabled: false
                    antialiasing: true
                    readOnly: true
                    activeFocusOnPress: false
                    echoMode: TextInput.PasswordEchoOnEdit
                    font.bold: false
                    font.pointSize: 24
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8

                    maximumLength: 4

                    inputMask: "9999"

                    selectByMouse: false

                    text: ""
                }
            }

            RowLayout
            {
                id: ueKeypadActionLayout

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.margins: 8

                //Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                layoutDirection: Qt.LeftToRight

                spacing: 8

                UeButton
                {
                    id: ueKeypadButtonLogin

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("Login")
                }   // UeButton

                UeButton
                {
                    id: ueKeypadButtonClear

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    ueText: qsTr("Clear")

                    onUeSignalButtonClicked:
                    {
                        ueKeypadPinFieldField.text="";
                    }   // onClicked
                }   // UeButton
            }   // RowLayout
        }   // ColumnLayout
    }   // Rectangle
}   // Item

现在，如果我通过数字按钮输入 4 位数的 PIN，如何将文本附加到 ueKeypadPinFieldField？我知道 onClicked 处理程序，但如何在 UeButton 中附加来自该事件处理程序的数字？

Answer 1

像这样：

Repeater {
    model: [qsTr("1"), qsTr("2"), qsTr("3"), qsTr("4"), qsTr("5"), qsTr("6"), qsTr("7"), qsTr("8"), qsTr("9"), qsTr("0")]

    Button {
        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.columnSpan: index == 9 ? 3 : 1

        text: modelData
        onClicked: ueKeypadPinFieldField.text += modelData
    }
}

请注意，我将所有 Button 都移到了中继器中，因为它更整洁。不幸的是 qsTr() 个参数 must be literals，否则您可以通过在 for 循环中动态填充模型来使其更加整洁。

将文本附加到 TextInput

Appending text to TextInput

qt

qml

qtquick2