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

صفوف الصفحات وكومات الصفحات

أضف تدفقًا إلى تطبيقك: أضف الصفحات وأزل واستبدل بطرق مختلفة

صف من الصفحات

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

كلما أُضيفت صفحة، أو دُفعت، تظهر إلى يمين الصفحات الموجودة، مشكّلة صفًا. يمكن إدارة هذا الصف من الصفحات باستخدام Kirigami.PageRow المسمى بملاءمة.

قد يبدو صف صفحات أدنى بصفحة واحدة هكذا:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Single Page"
    width: 500
    height: 200

    Kirigami.PageRow {
        anchors.fill: parent

        Kirigami.Page {
            id: mainPage
            anchors.fill: parent
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
            }
        }
    }
}
صفحة واحدة بلون أزرق فاتح لإظهار أبعاد الصفحة

صفحة واحدة بلون أزرق فاتح لإظهار أبعاد الصفحة

هناك تحسينان يمكن إجراؤهما هنا. الأول هو أنه باستخدام initialPage، يمكننا ضبط mainPage لتكون أول صفحة تظهر في صف الصفحات، وتُدار أبعادها بواسطة صف الصفحات بدلاً من المرتكزات اليدوية أو الموضّعات أو المخططات. الثاني هو الحصول على شريط أدوات، يمكن ضبطه بتعريف نمط شريط أدوات باستخدام globalToolBar.style. هناك بضعة أنماط يمكننا الاختيار من بينها، لكننا سنختار Kirigami.ApplicationHeaderStyle.Auto الآن.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "With globalToolBar and initialPage"
    width: 500
    height: 200
    Kirigami.PageRow {
        anchors.fill: parent
        globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto
        initialPage: Kirigami.Page {
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
            }
        }
    }
}
صفحة واحدة مع شريط أدوات بلون أزرق فاتح لإظهار أبعاد الصفحة

صفحة واحدة مع شريط أدوات بلون أزرق فاتح لإظهار أبعاد الصفحة

هناك طريقتان فقط لإضافة صفحات إلى صف صفحات: بضبط initialPage (الذي يمكنه أخذ مصفوفة من الصفحات اختياريًا) أو باستخدام push(). لحذف صفحة من صف الصفحات، ينبغي استخدام pop()، بينما يمكن استخدام goBack() أو goForward() للتنقل بين الصفحات.

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

Kirigami.ApplicationWindow {
    title: "Multiple pages in a row"
    width: 700
    height: 300
    Kirigami.PageRow {
        id: mainRow
        anchors.fill: parent
        globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto
        initialPage: Kirigami.Page {
            id: firstPage
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
                Controls.Button {
                    anchors.centerIn: parent
                    text: "Push!"
                    onClicked: mainRow.push(secondPage)
                }
            }
        }

        Component {
            id: secondPage
            Kirigami.Page {
                Rectangle {
                    anchors.fill: parent
                    color: "lightgreen"
                    Controls.Button {
                        anchors.centerIn: parent
                        text: "Pop!"
                        onClicked: mainRow.pop()
                    }
                }
            }
        }
    }
}
صفحة أولية بلون أزرق فاتح

صفحة أولية بلون أزرق فاتح

عند النقر على "Push!"، تظهر صفحة ثانية بلون أخضر فاتح.

عند النقر على "Push!"، تظهر صفحة ثانية بلون أخضر فاتح.

كومة صفحات التطبيق

إذا بدا لك Kirigami.PageRow مع شريط أدوات مألوفًا، فذلك لأنك رأيته من قبل. ApplicationWindow.pageStack ليس سوى صف صفحات شامل ومريح جدًا. كل وظيفة متاحة لـ PageRow متاحة أيضًا لـ pageStack.

يمكن تقليص المثال السابق بشكل كبير باستخدام pageStack، مع الميزة الإضافية لإجراءات التنقل:

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

Kirigami.ApplicationWindow {
    title: "Using the pageStack"
    width: 500
    height: 200
    pageStack.initialPage: Kirigami.Page {
            id: firstPage
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
                Controls.Button {
                    anchors.centerIn: parent
                    text: "Push!"
                    onClicked: pageStack.push(secondPage)
                }
            }
        }
        Component {
            id: secondPage
            Kirigami.Page {
                Rectangle {
                    anchors.fill: parent
                    color: "lightgreen"
                    Controls.Button {
                        anchors.centerIn: parent
                        text: "Pop!"
                        onClicked: pageStack.pop()
                }
            }
        }
    }
}

عمومًا سترغب في استخدام pageStack بدلاً من تنفيذ PageRow الخاص بك، خاصة عندما يكبر تطبيقك وتحتاج مكوناتك إلى العيش في ملفات منفصلة. إذا أنشأت نافذتك في Main.qml باستخدام Kirigami.ApplicationWindow، فلا يزال بإمكان مكون موجود في ملف آخر استدعاء pageStack الشامل مباشرة عن طريق استدعاء applicationWindow():

// "Main.qml"
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Pushing a Page from a different QML file"
    width: 700
    height: 400
    pageStack.initialPage: BasicPage {}
}

و

// "BasicPage.qml"
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.Page {
    Controls.Button {
        anchors.centerIn: parent
        text: "This pushes page1 from BasicPage\ninto the pageStack from Main.qml!"
        onClicked: {
            applicationWindow().pageStack.push(page1)
        }
        Component {
            id: page1
            Kirigami.Page {
                Controls.Label {
                    anchors.centerIn: parent
                    text: "page1 was pushed!"
                }
            }
        }
    }
}
النقر على الزر يدفع صفحة جديدة بمساعدة applicationWindow

النقر على الزر يدفع صفحة جديدة بمساعدة applicationWindow