прилагая текст TextInput

Question

Я работаю на QML PIN записи Item, как показано на следующем скриншоте:

Теперь в нижней части Item есть QML TextInput поле, названное ueKeypadPinFieldField, как видно из код UeKeypad:

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 

Теперь, как я добавить текст в ueKeypadPinFieldField если ввести 4-значный PIN-код с помощью цифровых кнопок? Я знаю о обработчике 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.