Bagaimana untuk menguraikan sifat ListElement pada berbilang baris

Question

Saya cuba memikirkan cara melakukan sifat ListElement berbilang baris.

Saya mempunyai ListModel dengan ListElements seperti ini:

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

Saya boleh membalut baris dengan hanya memasukkan aksara baris baharu, tetapi baris berikutnya tidak sejajar dengan blok teks.

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

Apabila saya cuba tab pada teks untuk menyelaraskannya, ia menghasilkan banyak ruang putih apabila penerangan dicetak ke skrin (yang masuk akal, tetapi jelas bukan yang saya mahukan).

   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.

Saya cuba menyambung melalui "+" tetapi ini menghasilkan ralat: ListElement：无法使用脚本获取属性值.

Saya cuba menggunakan garis miring terbalik seperti dalam fail .pro tetapi itu tidak berjaya juga.

Barisan baharu berfungsi, tetapi ia tidak penting kerana ia tidak menyelesaikan masalah ruang kosong.

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

Jika sesiapa mempunyai sebarang idea, saya amat berterima kasih.

Answer 1

Pertama sekali, anda boleh mempertimbangkan untuk menggunakan tatatanda backtick Javascript untuk mengisytiharkan rentetan berbilang baris.

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

Selain itu, anda mungkin mendapati ListElement 声明具有限制性，不支持 Javascript 表达式，例如Date.now() Dalam kes ini, anda boleh mempertimbangkan untuk menggunakan kod imperatif. Jika anda mahukan rupa yang agak deklaratif, anda boleh mengisytiharkan pelbagai objek Javascript dan mengulanginya.

Semasa merender, anda juga boleh mempertimbangkan untuk menggunakan wrapMode: Text.Wrap untuk menggunakan pembalut perkataan tambahan untuk memformat teks.

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

Anda bolehcuba dalam talian!

Answer 2

Saya tidak mempunyai penyelesaian langsung untuk pelaksanaan yang anda gunakan yang mencipta ListElements secara langsung. Tetapi kaedah .append() ListModel mengambil objek JS sebagai parameter. Ini menyokong rentetan berbilang baris. Jadi daripada mencipta ListElements seperti ini, anda boleh menambahkannya apabila komponen itu lengkap seperti ini:

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