Search code examples
javascriptqtpropertiesqmlmultiline

How to Break ListElement Properties over Multiple Lines


I am trying to figure out how to do a multiline ListElement property.

I have a ListModel with ListElements as follows:

ListElement {
   key: "key";
   value: 1;
   description: "Very long, full paragraph description that extends way off the screen which I would like to wrap in code nicely."
}

I can wrap it by simply entering a newline, but then the following lines are not lined up with the block of text.

   description: "Very long, full paragraph description
that extends way off the screen which I would like to
wrap in code nicely."

When I try to tab over the text to line it up, it causes massive whitespace when the description is printed to screen (which makes sense, but obviously not what I want).

   description: "Very long, full paragraph description
               that extends way off the screen which I would like to
               wrap nicely in code."
Very long, full paragraph description             that extends way off the screen which I would like to
            wrap in code nicely.

I have tried concatenating via '+', but that produces an error: ListElement: Cannot use script for property value.

I have tried using backslashes like I do in the .pro file, but that does not work, either.

Newline characters work, but they do not matter, as they do not solve the whitespace issue.

Very long, full paragraph description
            that extends way off the screen which I would like to
            wrap in code nicely.

If anyone has any ideas, I would appreciate them.


Solution

  • I don't have a direct solution for the implementation you are using with creating ListElements directly like that. But the .append() method of the ListModel does take JS objects as arguments. And those support multiline strings. So instead of creating ListElements like that you could just append them on component completion like this:

    ListModel {
        id:listModel
    
        Component.onCompleted: {
            listModel.append({
                "key": "key",
                "value": 1,
                "description": "Very long, full paragraph description" +
                "that extends way off the screen which" +
                "I would like to wrap in code nicely."
            })
        }
    }