إنشاء تطبيق لـ Ubuntu Touch [QML] - [الجزء 1]

مقدمة

هنا سوف تأتي سلسلة من المشاركات (مثل تلك التي فعلت مع فاكرها) ، ولكن هذه المرة مع طلب أوبونتو التي تعمل باللمس، يكون التطبيق مبدئيًا "نفسه" كما في مشاركات من فاكرها، أي نوع من الألعاب حيث لدينا سؤال و 4 إجابات في شكل اختبار ، ثم لدينا ثلاثة أزرار ، أحدها لإزالة إجابتين من الإجابات المحتملة (50٪) ، وأخرى لتجميد الوقت والأخيرة انتقل من السؤال.

لمعرفة كيفية البدء في إنشاء مشروع ، يمكنك زيارة هذا بريد.. اعلاني (التوثيق ، إنشاء المشروع ...) ، لأننا سنبدأ بالمشروع الذي تم إنشاؤه بالفعل.

معرفة أساسية

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

مكونات أوبونتو هي مكونات سنستخدمها لتطبيقنا:

لاستخدامها بنفس الطريقة ، يتعين علينا استيراد الوحدة:

استيراد Ubuntu.Components 0.1

يمكننا العثور على عناصر مختلفة داخل المكونات ، مثل الأزرار وأشرطة التقدم وما إلى ذلك. يمكننا تنزيل مشروع حيث يعرضون لنا معظم هذه المكونات:

فرع bzr lp: مجموعة أدوات ubuntu-ui 

تصميم التطبيق

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

سيتألف التطبيق ، مثل الصورة ، من سؤال ووقت وإجابات وخيارات ونقاط. سيكون الاختلاف الوحيد (بصرف النظر عن "النمط") هو أنه سيكون لدينا علامات تبويب أعلاه.

لهذا سوف نستخدم عناصر الزر والتسمية وشريط التقدم. بالنسبة للهيكل ، سوف نستخدم العنصر عمود y صف.

تصميم مخطط الشاشة الرئيسية:

نبدأ مع MainView ، حيث سيتم العثور على علامات تبويب مختلفة ، في هذه الحالة سنعمل على تخطيط الشاشة الأولية لتطبيقنا.

MainView {objectName: "mainView" // ...}

الأبعاد (لأوبونتو تاتش):

العرض: عدد الوحدات (50) الارتفاع: عدد الوحدات (75)

نحدد طول وعرض تطبيقنا ، حيث سيكون العرض 50 (وحدة) والطول 75 ، سنقوم الآن بتلوينه:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

لدينا لون الرأس والجسم والتذييل:

كما ذكرت من قبل ، سيتم تنظيم التطبيق بواسطة علامات التبويب:

    علامات التبويب {id: tabs تعيين {objectName: "jocTab"} / * إضافة {objectName: "addQuestions"} * /}

كما نرى لدينا علامتا تبويب ، علقت إحداهما (لم نقم بإنشائها بعد) والأخرى للعب (والتي سننشئها الآن). لإنشاء علامة التبويب المذكورة ، سننشئ ملف qml جديدًا (إضافة جديد -> Qt -> ملف QML -> ...) ، سيكون اسم الملف المذكور لعبة. qml.

حسنًا ، دعنا نعدل Game.qml بطريقة نحولها إلى علامة تبويب تحتوي بداخلها على صفحة (صفحة):

استيراد QtQuick 2.0 استيراد Ubuntu.Components 0.1 علامة تبويب {title: i18n.tr ("Game") Page {}}

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

العمود {anchors.top: Gamepage.top anchors.topMargin: تباعد 50: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Question؟" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} زر {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} الزر {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} الزر {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} الزر {id: resp4 text: "Response 4" .horizontalCenter: parent.horizontalCenter} الصف {التباعد: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50٪"} الزر {id: bCon text: "Freeze"} الزر {id: bNext text: " التالي "}} الصف {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} التصنيف {id: Hits text:" Hit: 0 "} Label {id : point text: "Points: 0" fontSize: "medium"}}

دعونا نرى كيف أن لكل عنصر محدد بواسطة {} خصائص مختلفة ، في حالة التسمية والأزرار يمكننا أن نرى أن خاصية "النص" هي النص الذي يظهره ، ومن الخصائص المهمة غير المرئية المعرف "id" ، والذي سيساعدنا عند تنفيذ منطق التطبيق.

في النهاية يمكننا أن نرى النتيجة: