Skip to main content
تخط المحتوى

الرقاقات

الرقاقات هي عناصر صغيرة تُستخدم عادةً لسرد الخصائص ذات الصلة.

مكونات Kirigami.Chip هي عناصر صغيرة موروثة من AbstractButton تُستخدم لعرض الخصائص الشائعة أو عوامل تصفية لشيء ما. هذه عادةً عناصر نصية، وهي قابلة للتفاعل وتأتي مع زر حذف اختياري.

أمثلة على الرقاقات في معرض كيريجامي

بداية سريعة

يمكن إضافة الرقاقات بسهولة باستخدام مكون Kirigami.Chip. بتعيين سلسلة نصية لحقل AbstractButton.text الموروث، نعطي الرقاقات أسماءها.

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"
            }
        }
    }
}
الإعلان عن الرقاقات وعرضها

مع المكررات (موصى به)

نظرًا لأن الرقاقات مخصصة للاستخدام أكثر من مرة، فمن المحتمل أن ترغب في استخدام نوع من بنية بيانات القائمة والتكرار عليها لعرض الرقاقات. للقيام بذلك، نحتاج إلى ListModel ومكون Repeater.

يُستخدم ListModel كتخزين للرقاقات. لتعبئة ListModel (وبالتالي الرقاقات)، نعلن عن بضعة مكونات ListElement، والتي تحتوي على حقل يُعرف باسم text. يمكننا استخدام هذه السلسلة النصية المعينة من هنا لحقل text لكل رقاقة مكررة.

يُستخدم المكرر لعرض الرقاقات. أولاً، نحتاج إلى تعيين حقل model للمكرر إلى ListModel الخاص بنا، أو إنشاء ListModel داخل المكرر. ثم، نعلن عن مكون Kirigami.Chip داخل المكرر، ونعين حقل text الخاص به ببيانات العنصر باستخدام الخاصية 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
                }
            }
        }
    }
}

تطبيق مثال

يوضح تطبيق المثال أدناه كيف يمكن استخدام الرقاقات في برامج مثل قوائم المهام.

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

تطبيق مثال للرقاقات