如何在多行上分解 ListElement 属性

Question

我正在尝试弄清楚如何执行多行 ListElement 属性。

我有一个带有 ListElements 的 ListModel，如下所示：

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

我可以通过简单地输入换行符来换行，但随后的行不会与文本块对齐。

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

当我尝试在文本上按 Tab 键将其对齐时，当描述打印到屏幕上时，它会导致大量空白（这是有道理的，但显然不是我想要的）。

   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.

我尝试通过“+”连接，但这会产生错误：ListElement：无法使用脚本获取属性值。

我尝试过像在 .pro 文件中那样使用反斜杠，但这也不起作用。

换行符可以工作，但它们并不重要，因为它们不能解决空格问题。

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

如果有人有任何想法，我将不胜感激。

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