QML textinput wie Auswahl zu handhaben und entkommen

Question

ich eine QML Anwendung am Bau und ich habe eine TextInput Komponente wie folgt:

TextInput { 
       id: editableTextInput 
       text: styleData.value 
       horizontalAlignment: Text.AlignLeft 
       verticalAlignment: Text.AlignVCenter 
       selectionColor: 'darkgray' 
       selectedTextColor: 'white' 
       font.pixelSize: 14 
       font.family: "AvantGarde-Medium" 

       onEditingFinished: { 
        // TO DO: Handle new text 
       } 

       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         editableTextInput.selectAll() 
        } 
       } 
      } 

Im Moment, so wie es aussieht, wenn der Benutzer klickt auf den Text, es wählt den ganzen Text aus und dann kann ich anfangen zu tippen und der ganze Text wird ersetzt, aber ich möchte dem Benutzer ein bisschen mehr Kontrolle geben. Zum einen wählt der Benutzer zunächst den vollständigen Text aus und dann, wenn er erneut klickt, sollte er den Cursor an die aktuelle Position bringen. Außerdem sollte der Escape-Schlüssel grundsätzlich den alten Text wiederherstellen und den gesamten Vorgang abbrechen.

Dies sind Standardmethoden für die Texteingabe. Ich habe mich gefragt, ob ich das alles explizit programmieren muss oder gibt es eine Möglichkeit, dieses Verhalten mit dem TextInput Steuerelement zu bekommen.

Answer 1

Im Grunde brauchen Sie nicht MouseArea dafür zu verwenden. Hook activeFocus um zu entscheiden, wann der Text auszuwählen ist (beim ersten Klick wird activeFocus wahr werden), den alten Text speichern und wiederherstellen, wenn die Bearbeitung beendet ist, wenn Escape gedrückt wurde.

Ich denke, das bekommt man einen guten Teil des Weges zu dem, was Sie wollen:

import QtQuick 2.6 

TextInput { 
    text: "Hello world!" + index 
    font.pixelSize: 24 
    width: 300 
    height: 30 

    // Store the previous text for restoring it if we cancel 
    property string oldText 

    // Lets us know that the user is cancelling the save 
    property bool cancelling 

    Keys.onEscapePressed: { 
     // Cancel the save, and deselect the text input 
     cancelling = true 
     focus = false 
    } 

    onEditingFinished: { 
     if (cancelling) { 
      // When cancelling, restore the old text, and clear state. 
      text = oldText 
      oldText = "" 
      cancelling = false 
     } else { 
      // TO DO: Handle new text 
     } 
    } 

    onActiveFocusChanged: { 
     // When we first gain focus, save the old text and select everything for clearing. 
     if (activeFocus) { 
      oldText = text 
      selectAll() 
     } 
    } 
}