Text Selection in QtQuick

Question

I am writing a dialog box for a software plugin for Cura, a 3D printing slicer. When the user slices their file it brings up a dialog box to name the file before uploading it to the 3D printer. A python script generates the name in the format "print name - material-otherinformation.gcode" Right now, when the dialog loads, it highlights the whole text field except for the .gcode extension at the end. I would like it to only highlight a portion of that text field by default, namely the print name part. It is easy for me to return the length of that section as an integer and pass it to the QML file. I am definitely an amateur with QML, but it seems like the select function should be able to handle that but I can't figure out the usage. Any assistance or pointers would be much appreciated!

Here's a simplified version of the code. What I would like to do is add something to this so that just "word 1" is highlighted when the dialog box appears.

import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.2
import QtQuick.Window 2.1

import UM 1.1 as UM

UM.Dialog
{
    id: base;

    minimumWidth: screenScaleFactor * 400
    minimumHeight: screenScaleFactor * 120


    Column {
        anchors.fill: parent;

        TextField {
            objectName: "nameField";
            id: nameField;
            width: parent.width;
            text: "word1 - word2 - word3.gcode";
            maximumLength: 100;
        }

    }

}

Read TextField doc. Follow link to superclass, TextInput. Note all the text selection stuff there. Write JS code to QML to set selection to the desired part of the text, maybe triggered by when component is complete or when you set the initial file name. — hyde
@hyde I read through that documentation and found the select method which does exactly what I want according to the documentation. What I'm unclear on is implementation. If I just wanted to select the first 5 characters, where/how is the select function added to the code I included? — Zach Rose

Maxim Paperno Maxim Paperno · Accepted Answer · 2019-11-18T23:01:09

It's just a matter of when to use the TextInput::select() method. This could be in Component.onCompleted: of either the dialog or the text field, for example:

UM.Dialog
{
...
    property int selectionLength: 0

    Component.onCompleted: nameField.select(0, selectionLength);
...
        TextField {
            id: nameField;
            text: "word1 - word2 - word3.gcode";
        }
...
}

If selectionLength could change after dialog is created, then I'd create a separate function which can be called from different events or even directly:

UM.Dialog
{
...
    property int selectionLength: 0

    Component.onCompleted: select(selectionLength);
    onSelectionLengthChanged: select(selectionLength);

    function select(len) { nameField.select(0, len); }

...
        TextField {
            id: nameField;
            text: "word1 - word2 - word3.gcode";
        }
...
}

Obviously if the selection isn't going to be from the first character then some adjustment to this strategy will be needed.

Text Selection in QtQuick

1 Answers