Comment décomposer la propriété ListElement sur plusieurs lignes

Question

J'essaie de comprendre comment créer une propriété ListElement à plusieurs lignes.

J'ai un ListModel avec ListElements comme ceci :

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."
}

Je peux renvoyer des lignes à la ligne en entrant simplement un caractère de nouvelle ligne, mais les lignes suivantes ne s'alignent pas avec le bloc de texte.

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

Lorsque j'essaie de tabuler sur le texte pour l'aligner, cela entraîne beaucoup d'espaces lorsque la description s'imprime à l'écran (ce qui est logique, mais ce n'est évidemment pas ce que je veux).

   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.

J'ai essayé de me connecter via "+" mais cela produit l'erreur : ListElement：无法使用脚本获取属性值.

J'ai essayé d'utiliser des barres obliques inverses comme dans le fichier .pro mais cela n'a pas fonctionné non plus.

Les nouvelles lignes fonctionnent, mais elles n'ont pas d'importance car elles ne résolvent pas le problème des espaces.

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

Si quelqu'un a des idées, je lui serais très reconnaissant.

Answer 1

Tout d’abord, vous pouvez envisager d’utiliser la notation Javascript backtick pour déclarer des chaînes multilignes.

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.`
        }

En plus de cela, vous pouvez trouver ListElement 声明具有限制性，不支持 Javascript 表达式，例如Date.now() Dans ces cas, vous pouvez envisager d'utiliser du code impératif. Si vous souhaitez un aspect quelque peu déclaratif, vous pouvez déclarer un tableau d'objets Javascript et parcourir celui-ci.

Lors du rendu, vous pouvez également envisager d'utiliser wrapMode: Text.Wrap pour appliquer un retour à la ligne supplémentaire afin de formater le texte.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    ListModel {
        id: listModel
        ListElement {
            key: "key"
            value: 1
            time: 01683504000000
            description: `Very long, full paragraph description
that extends way off the screen which I would like to
wrap in code nicely.`
        }
        property var initData: [{
            key: "key2",
            value: 2,
            time: Date.now(),
            description: `Very long, full paragraph description
that extends way off the screen which I would like to
wrap in code nicely.`.replace(/\n/g, " ")
         },{
            key: "key3",
            value: 3,
            time: (new Date("2023-05-09").getTime()),
            description: `Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.`
         },{
            key: "key4",
            value: 4,
            time: (new Date("2023-05-10").getTime()),
            description: `Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.`.replace(/\n/g, " ")
         },{
            key: "key5",
            value: 5,
            time: (new Date("2023-05-11").getTime()),
            description: [
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"Donec odio. Quisque volutpat mattis eros.",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"Donec odio. Quisque volutpat mattis eros.",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"Donec odio. Quisque volutpat mattis eros."
].join(" ")
         }]
         Component.onCompleted: {
             for (let obj of initData) {
                 append(obj);
             }
         }
    }
    ListView {
        anchors.fill: parent
        model: listModel
        ScrollBar.vertical: ScrollBar {
            width: 20
            policy: ScrollBar.AlwaysOn
        }
        delegate: Frame {
            width: ListView.view.width - 20
            background: Rectangle {
                color: index & 1 ? "#eee" : "#ddd"
                border.color: "#ccc"
            }
            ColumnLayout {
                width: parent.width
                Text { text: `key: ${key}` }
                Text { text: `time: ${new Date(time)} (${time})` }
                Text { text: `value: ${value}` }
                Text {
                    Layout.fillWidth: true
                    text: description
                    wrapMode: Text.Wrap
                }
            }
        }
    }
}

Vous pouvezl'essayer en ligne !

Answer 2

Je n'ai pas de solution directe pour l'implémentation que vous utilisez qui crée directement ListElements. Mais la méthode .append() de ListModel prend un objet JS comme paramètre. Ceux-ci prennent en charge les chaînes multilignes. Ainsi, au lieu de créer des ListElements comme ceci, vous pouvez les ajouter lorsque le composant est terminé comme ceci :

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."
        })
    }
}