Blatoj

Blatoj estas malgrandaj elementoj kutime uzataj por listigi rilatajn ecojn.

Kirigami.Chip components are small elements inherited from AbstractButton used for displaying common properties or filters of something. These are typically text elements, which is also interactable and comes with an optional delete button.

Ekzemplaj Blatoj en Kirigami Galerio

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
import QtQuick.Layouts
import QtQuick.Controls
import org.kde.kirigami 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"
            }
        }
    }
}
Deklarante kaj Montrante Blatojn

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

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
import QtQuick.Layouts
import QtQuick.Controls
import org.kde.kirigami 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)
                    }
                }
            }
        }
    }
}

Chips Example Application