Blatoj

Blatoj estas malgrandaj elementoj kutime uzataj por listigi rilatajn ecojn.

Kirigami.Chip komponantoj estas malgrandaj elementoj hereditaj de AbstractButton uzataj por montri komunajn propraĵoj aŭ filtriloj de io. Ĉi tiuj estas tipe tekstaj elementoj, kiuj ankaŭ estas interageblaj kaj venas kun laŭvola forigbutono.

Rapida Komenco

Blatoj povas facile esti aldonitaj uzante la komponanton "Kirigami.Chip". Asignante ĉenon al ĝia teksto-kampo, ni donas al blatoj sian nomon.

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    title: "Chips"

    pageStack.initialPage: Kirigami.Page {
        title: "Chips"

        Kirigami.FormLayout {
            anchors.fill: parent
            Kirigami.Chip {
                text: "Chip 1"
            }
            Kirigami.Chip {
                text: "Chip 2"
            }
            Kirigami.Chip {
                text: "Chip 3"
            }
        }
    }
}

Kun Ripetiloj (Rekomendita)

Ĉar blatoj estas uzataj pli ol unufoje, vi verŝajne volos uzi iun liston de datumstrukturo kaj ripeti ilin por montri la blatojn. Por fari tion, ni bezonas ListModel kaj [Ripetilon](https://doc.qt.io /qt-6/qml-qtquick-repeater.html) komponanto.

La ListModel estas uzata kiel konservado por la blatoj. Por plenigi la ListModel (kaj tial blatojn), ni deklaras kelkajn ListElement-komponentojn, kiuj enhavas kampon konatan kiel teksto. Ni povas uzi ĉi tiun ĉenon asignitan de ĉi tie al la kampo teksto por ĉiu ripeta blato.

La Ripetilo estas uzata por montri la blatojn. Unue, ni devas agordi la kampon "modelo" de la Ripetilo al nia ListModelo, aŭ krei la ListModel ene de ripetilo. Poste, ni deklaras la komponanton Kirigami.Chip ene de la Ripetilo, kaj atribuas ĝian kampon text kun la datumoj de la elemento uzante la proprecon modelData.

Kirigami.ApplicationWindow {
    id: root
    title: "Chips"

    ListModel {
        id: chips

        ListElement { text: "Chip 1" }
        ListElement { text: "Chip 2" }
        ListElement { text: "Chip 3" }
    }

    pageStack.initialPage: Kirigami.Page {
        title: "Chips"

        Kirigami.FormLayout {
            anchors.fill: parent
            Repeater {
                Layout.fillWidth: true
                model: chips

                Kirigami.Chip {
                id: chip
                    text: modelData
                }
            }
        }
    }
}

Noto

Vi povas dinamike almeti kaj forigi datumojn de la ListModel, kaj la Ripetilo aŭtomate faros tiujn ŝanĝojn. Tamen, simple ŝanĝi specifan objekton de aŭ la Ripetilo aŭ ListModel ne influas la alian, kaj postulas la ŝanĝon de ambaŭ, krom se io kiel QAbstractListModel estas uzata. Vidu Ekzempla Apliko por pliaj informoj.

Ekzempla Apliko

La ekzempla aplikaĵo malsupre montras kiel blatoj povas esti uzataj en programoj kiel farendaj listoj.

 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
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    id: root
    title: "Chips"

    ListModel {
        id: chips

        ListElement { text: "Chip 1" }
        ListElement { text: "Chip 2" }
        ListElement { text: "Chip 3" }
    }

    pageStack.initialPage: Kirigami.Page {
        title: "Chips"

        Kirigami.OverlaySheet {
            id: editChipPrompt

            property var chip;
            property var index;

            header: Kirigami.Heading {
                text: "Edit Chip"
            }

            footer: DialogButtonBox {
                standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
                onAccepted: {
                    // Both the data from the Repeater and ListModel must be
                    // edited in order to update both.
                    editChipPrompt.chip.text = editTextField.text;
                    chips.setProperty(editChipPrompt.index, "text", editTextField.text);
                    editChipPrompt.close();
                }
                onRejected: {
                    editChipPrompt.close();
                }
            }

            TextField {
                id: editTextField
            }
        }

        Kirigami.FormLayout {
            anchors.fill: parent
            TextField {
                id: insertTextField
                Kirigami.FormData.label: "Item:"
                onAccepted: chips.append({ text: insertTextField.text })
            }
            // Wrapped in ColumnLayout to prevent binding loops.
            ColumnLayout {
                Layout.alignment: Qt.AlignHCenter
                Repeater {
                    model: chips

                    Kirigami.Chip {
                        id: chip
                        text: modelData
                        onClicked: {
                            editTextField.text = modelData;
                            editChipPrompt.chip = chip;
                            editChipPrompt.index = index;
                            editChipPrompt.open();
                        }
                        onRemoved: chips.remove(index)
                    }
                }
            }
        }
    }
}

Kestoj

Tegu foliojn