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.

Rapida Komenco

Chips can easily be added using the Kirigami.Chip component. By assigning a string to its inherited AbstractButton.text field, we give chips their name.

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

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

Kestoj

Tipoj de dialogoj