So zerlegen Sie die ListElement-Eigenschaft in mehrere Zeilen

Question

Ich versuche herauszufinden, wie man eine mehrzeilige ListElement-Eigenschaft erstellt.

Ich habe ein ListModel mit ListElements wie folgt:

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

Ich kann Zeilen umbrechen, indem ich einfach ein Zeilenumbruchzeichen eingebe, aber nachfolgende Zeilen werden nicht am Textblock ausgerichtet.

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

Wenn ich versuche, den Text mit der Tabulatortaste auszurichten, entsteht beim Drucken der Beschreibung auf dem Bildschirm viel Leerraum (was sinnvoll ist, aber offensichtlich nicht das ist, was ich möchte).

   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.

Ich habe versucht, eine Verbindung über „+“ herzustellen, aber dies erzeugt den Fehler: ListElement：无法使用脚本获取属性值.

Ich habe versucht, Backslashes wie in der .pro-Datei zu verwenden, aber auch das hat nicht funktioniert.

Zeilenumbrüche funktionieren, aber sie spielen keine Rolle, weil sie das Leerraumproblem nicht lösen.

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

Wenn jemand eine Idee hat, wäre ich sehr dankbar.

Answer 1

首先，您可以考虑使用Javascript反引号表示法来声明多行字符串。

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

除此之外，您可能会发现 ListElement 声明具有限制性，不支持 Javascript 表达式，例如Date.now().在这些情况下，您可以考虑使用命令式代码。如果您想要某种声明性的外观，您可以声明一个 Javascript 对象数组并对其进行迭代。

渲染时，您还可以考虑使用 wrapMode: Text.Wrap 应用额外的自动换行来格式化文本。

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

您可以在线尝试！

Answer 2

对于您使用的直接创建 ListElements 的实现，我没有直接的解决方案。但是 ListModel 的 .append() 方法确实将 JS 对象作为参数。这些支持多行字符串。因此，您可以像这样在组件完成时附加它们，而不是像这样创建 ListElements：

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