如何在多行上分解 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."
        })
    }
}