تخطيطات النماذج

أنشئ بسهولة مناطق تفاعل جذابة باستخدام تخطيطات نماذج كيريغامي

تسهل مكونات Kirigami.FormLayout عليك إنشاء نماذج تتوافق مع إرشادات واجهة المستخدم البشرية لكيدي. وهي مثالية لحوارات الإعدادات ولمجموعات كبيرة من عناصر التحكم وحقول الإدخال المرتبطة ببعضها البعض.

عند توفير مساحة كافية، ستشغل تخطيطات النموذج عمودين. سيشغل العمود الأيسر باللصائق المقدمة للمكونات الفرعية للنموذج، بينما سيشغل الأيمن بالمكونات الفرعية نفسها. في النوافذ محدودة المساحة (أو على الأجهزة المحمولة)، ستتكون النماذج من عمود رأسي واحد مع وضع لصائق المكونات الفرعية فوق المكون الخاص بها.

نموذج بسيط

مكونات Kirigami.FormLayout مشابهة في الاستخدام لمكونات QtQuick Layout مثل ColumnLayout أو RowLayout. ستُرتّب المكونات الفرعية آليًا وفقًا للحجم المتاح لتخطيط النموذج.

للمكونات الفرعية لـ Kirigami.FormLayout خاصية باسم Kirigami.FormData.label. تتيح لك هذه الخاصية تعيين اللصيقة التي ستُقدم للمكون الفرعي المعني.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    pageStack.initialPage: Kirigami.Page {

        Kirigami.FormLayout {
            anchors.fill: parent

            Controls.TextField {
                Kirigami.FormData.label: "TextField 1:"
            }
            Controls.TextField {
                Kirigami.FormData.label: "TextField 2:"
            }
            Controls.TextField {
                Kirigami.FormData.label: "TextField 3:"
            }
        }
    }
}

الأقسام والفواصل

يمكن أيضًا تقسيم تخطيطات النموذج إلى أقسام. تعيين مكان بدء القسم سهل كتعيين خاصية Kirigami.FormData.isSection لمكون فرعي إلى true. سيوفر هذا للمكون هامشًا إضافيًا في الأعلى لتحديد بداية القسم الجديد.

مكونات Kirigami.Separator هي الأنسب لبدء أقسام جديدة. تُستخدم الفواصل لرسم خط أفقي رفيع، لتحديد نهاية القسم. إذا كنت تفضل عدم رسم خط بين الأقسام، يمكنك استخدام خاصية QML قياسية Item. بدلاً من ذلك، يمكنك استخدام خاصية Kirigami.FormData.isSection على أي مكون آخر.

ومع ذلك، هذا غير موصى به. على المكونات حيث Kirigami.FormData.isSection مضبوط على true، سيُعرض نص اللصيقة المقدم لخاصية Kirigami.FormData.label لهذا المكون كنص رأس القسم.

تحذير

لا ينطبق هذا على كل مكون، لذا يُوصى باستخدام مكونات Kirigami.Separator أو Item في الأماكن التي ترغب فيها باستخدام نص رأس.

نص الرأس هذا أكبر من نص اللصيقة العادي، ويمنح المستخدمين إشارة بصرية جميلة عن مضمون قسم تخطيط النموذج.

Kirigami.FormLayout {
    anchors.fill: parent

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
    Kirigami.Separator {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "New Section!"
    }
    ColumnLayout {
        Kirigami.FormData.label: "Radio buttons"
        Controls.RadioButton {
            text: "Radio 1"
            checked: true
        }
        Controls.RadioButton {
            text: "Radio 2"
        }
        Controls.RadioButton {
            text: "Radio 3"
        }
    }
    Item {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "Another Section! (lineless though)"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 4:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
}

فرض تخطيط سطح مكتب أو هاتف محمول

إذا كنت تفضل أن يبقى تخطيط النموذج ثابتًا بغض النظر عن بيئة تطبيقك، فيمكنك استخدام خاصية wideMode لمكون Kirigami.FormLayout:

عند ضبطه على true، يُنظّم تخطيط النموذج في تخطيط شاشة عريضة محسّن لسطح المكتب (عمود مزدوج)
عند ضبطه على false، يُنظّم تخطيط النموذج في تخطيط هاتف محمول (عمود مفرد)

Kirigami.FormLayout {
    anchors.fill: parent
    wideMode: false

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
}

محاذاة لصائقك

توجد حالات تريد فيها تعيين لصيقة لمكونات تحتوي على أكثر من سطر أو لقائمة مكونات. يمكن تحقيق ذلك بوضع Kirigami.FormData.label في ColumnLayout، كما قد لاحظت في الأقسام والفواصل. مبدئيًا، تُوضع اللصيقة في المركز العمودي للتخطيط، وهو أمر غير مرغوب دائمًا. يمكننا تغيير ذلك بمساعدة Kirigami.FormData.labelAlignment.

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: Qt.AlignTop

        Controls.Label {
            text: "This is some rather long text \nthat should elide to multiple lines \nto show how the label gets aligned."
            elide: Text.elideLeft
        }
    }
}

ضبط محاذاة اللصيقة مناسب بشكل خاص لإدارة المكونات أو قوائم المكونات التي لا تعرف حجمها مسبقًا. Elisa مثال جيد جدًا على ذلك:

لصيقة التعليق تُحاذى للأعلى فقط عندما يحتوي مكونها المقابل على أكثر من سطر

يمكننا فعل شيء مشابه لهذا باستخدام عامل ثلاثي في JavaScript:

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: labelText.text.lineCount > 1 ? Qt.AlignTop : Qt.AlignVCenter

        Controls.Label {
            id: labelText
            text: "This is some rather long text \nthat should elide to a new line \nso it appears below the Form Label."
            elide: Text.elideLeft
        }
    }
}

عناصر التحكم والعناصر التفاعلية

الرسائل المضمنة