شرح الصفحات

تطبيقنا

في الدرس السابق، تمكنا من إعداد وبناء وترجمة أول تطبيق كيريغامي لنا. مع وضع الأساسيات، يمكننا بدء رحلتنا نحو إنشاء تطبيق كامل الميزات.

ستركز هذه الدروس على إنشاء تطبيق يتيح للمستخدم رؤية عدد الأيام المتبقية حتى حدث من اختياره.

نوصيك أيضًا بالاطلاع على معرض كيريغامي، الذي يوفر عددًا من أمثلة واجهة المستخدم المفيدة.

في هذا القسم سنركز على الصفحات، أحد العناصر الهيكلية الرئيسية لأي تطبيق كيريغامي.

الصفحات

تُنظَّم تطبيقات كيريغامي عادةً في صفحات باستخدام Kirigami.Page. الصفحات هي "الشاشات" المختلفة للتطبيق. سترغب في تخصيص صفحة لجوانب محددة من تفاعل تطبيقك، ولتسهيل الأمور يمكنك إنشاء ملفات QML مختلفة لكل صفحة.

تُنظَّم الصفحات في كومة صفحات حيث يمكن دفعها وسحبها. على الهاتف، تُعرض الصفحة العليا فقط، بينما على شاشة أكبر (حاسوب مكتبي أو لوحي)، يمكن عرض صفحات متعددة جنبًا إلى جنب إذا رغبت.

لنعد إلى ملف Main.qml الذي أنشأناه في درسنا السابق:

 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

// Includes relevant modules used by the QML
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

// Provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // Unique identifier to reference this object
    id: root

    width: 400
    height: 300

    // Window title
    // i18nc() makes a string translatable
    // and provides additional context for the translators
    title: i18nc("@title:window", "Hello World")

    // Set the first page that will be loaded when the app opens
    // This can also be set to an id of a Kirigami.Page
    pageStack.initialPage: Kirigami.Page {
        Controls.Label {
            // Center label horizontally and vertically within parent object
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

نجعل تطبيقنا يبدأ بصفحة Kirigami.Page. كل ما أدرجناه فيها هو تسمية تحتوي على "Hello World"، لكننا سنحسّن الأمور قليلًا.

الفكرة وراء تطبيقنا هي أننا سنتمكن من عرض مجموعة من العدّادات التنازلية للمستخدم. المشكلة مع Kirigami.Page العادية هي أن لها حجمًا رأسيًا ثابتًا، لذا بدلًا من ذلك يمكننا استخدام Kirigami.ScrollablePage، التي تأتي مع شريط تمرير مدمج خاص بها.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    title: i18nc("@title:window", "Day Kountdown")

    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")
    }
}

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

pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")