suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So zerlegen Sie die ListElement-Eigenschaft in mehrere Zeilen

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

Ich habe ein ListModel mit ListElements wie folgt:

1

2

3

4

5

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.

1

2

3

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

1

2

3

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.

P粉083785014P粉083785014332 Tage vor473

Antworte allen(2)Ich werde antworten

  • P粉020556231

    P粉0205562312024-02-22 13:05:49

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

    1

    2

    3

    4

    5

    6

    7

    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 应用额外的自动换行来格式化文本。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    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

                    }

                }

            }

        }

    }

    您可以在线尝试!

    Antwort
    0
  • P粉242126786

    P粉2421267862024-02-22 13:01:32

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

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

            })

        }

    }

    Antwort
    0
  • StornierenAntwort