การสร้างแอปสำหรับ Ubuntu Touch [QML] - [ตอนที่ 1]

การแนะนำ

นี่จะเป็นชุดของโพสต์ (เช่นเดียวกับที่ฉันทำด้วย วาลา) แต่คราวนี้มีแอปพลิเคชันสำหรับ Ubuntu Touchในตอนแรกแอปพลิเคชันจะ "เหมือนกัน" กับในไฟล์ โพสต์จาก วาลานั่นคือเกมประเภทหนึ่งที่เรามีคำถามและคำตอบ 4 คำตอบในรูปแบบของการทดสอบจากนั้นเรามีปุ่มสามปุ่มปุ่มหนึ่งเพื่อกำจัดคำตอบที่เป็นไปได้สองคำ (50%) อีกปุ่มหนึ่งเพื่อหยุดเวลาและสุดท้ายในการ ไปจากคำถาม

หากต้องการดูวิธีเริ่มสร้างโครงการคุณสามารถไปที่สิ่งนี้ เสา (เอกสารสร้างโครงการ ... ) เนื่องจากเราจะเริ่มต้นด้วยโครงการที่สร้างไว้แล้ว

ความรู้พื้นฐาน

ในการสร้างแอพเราจะใช้ส่วนประกอบของ อูบุนตูในขณะที่เราสามารถสร้างส่วนประกอบของเราเองได้ แต่เราจะไม่ทำในกรณีนี้

Ubuntu Components เป็นส่วนประกอบที่เราจะใช้สำหรับแอพของเรา:

ในการใช้งานเหมือนกันเราต้องนำเข้าโมดูล:

นำเข้า Ubuntu ส่วนประกอบ 0.1

เราสามารถค้นหาองค์ประกอบต่างๆภายในส่วนประกอบเช่นปุ่มแถบความคืบหน้าเป็นต้น เราสามารถดาวน์โหลดโปรเจ็กต์ที่แสดงส่วนประกอบเหล่านี้ให้เราเห็นมากที่สุด:

สาขา bzr lp: ubuntu-ui-toolkit 

การออกแบบแอป

เราเริ่มจากภาพที่เรามีแอปพลิเคชันที่สร้างขึ้นด้วย GTKในกรณีนี้เราจะใช้ คิวเอ็มแอลในความเป็นจริงเราจะสร้างแอปพลิเคชันทั้งหมดด้วยไฟล์ Qt ด่วน (คิวเอ็มแอล + JavaScript).

แอปพลิเคชันเช่นเดียวกับรูปภาพจะประกอบด้วยคำถามเวลาคำตอบตัวเลือกและคะแนน ข้อแตกต่างเพียงอย่างเดียว (นอกเหนือจาก "สไตล์") คือเราจะมีแท็บที่ด้านบน

สำหรับสิ่งนี้เราจะใช้ปุ่มป้ายกำกับและองค์ประกอบ progressBar สำหรับโครงสร้างเราจะใช้องค์ประกอบ คอลัมน์ y แถว.

การออกแบบเค้าโครงของหน้าจอหลัก:

เราเริ่มต้นด้วย MainView ซึ่งจะพบแท็บต่างๆในกรณีนี้เราจะทำงานกับเค้าโครงของหน้าจอเริ่มต้นของแอพของเรา

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

ขนาด (สำหรับ Ubuntu Touch):

ความกว้าง: units.gu (50) ความสูง: units.gu (75)

เรากำหนดความยาวและความกว้างของแอปพลิเคชันของเราโดยที่ความกว้างจะเป็น 50 (หน่วย) และความยาว 75 ตอนนี้เราจะให้สี:

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

เรามีสีของส่วนหัวเนื้อหาและส่วนท้าย:

ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้แอปพลิเคชันจะถูกจัดโครงสร้างโดยแท็บ:

    แท็บ {id: tabs ตั้งค่า {objectName: "jocTab"} / * เพิ่ม {objectName: "addQuestions"} * /}

อย่างที่เราเห็นว่าเรามีสองแท็บหนึ่งแสดงความคิดเห็น (เรายังไม่ได้สร้างมันขึ้นมา) และอีกอันที่จะเล่น (ซึ่งเราจะสร้างขึ้นในตอนนี้) ในการสร้าง Tab ดังกล่าวเราจะสร้างไฟล์ qml ใหม่ (เพิ่มใหม่ -> Qt -> ไฟล์ QML -> …) ชื่อของไฟล์ดังกล่าวจะเป็น Game.qml.

เรามาแก้ไข Game.qml ในลักษณะที่เราเปลี่ยนเป็น Tab ซึ่งภายในมีหน้า (หน้า):

import QtQuick 2.0 นำเข้า Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Page {}}

ภายในหน้าเราจะเริ่มจัดโครงสร้างองค์ประกอบที่เรากล่าวถึงในการออกแบบ คอลัมน์ที่จะรวมองค์ประกอบทั้งหมดไว้ภายใน (จะวางในแนวตั้ง) จากนั้นเราจะจัดเรียงองค์ประกอบตามลำดับ: Label, ProgressBar, ปุ่ม 4 ปุ่ม; และในการใส่ตัวเลือกเราจะใช้องค์ประกอบ Row เพื่อวางในแนวนอน

คอลัมน์ {anchors.top: Gamepage.top anchors.topMargin: 50 ระยะห่าง: 15 width: parent.width height: parent.height - 50 ป้ายกำกับ {id: question anchors.topMargin: 500 text: "คำถาม?" 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" anchors .horizontalCenter: parent.horizontalCenter} Row {ระยะห่าง: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " ถัดไป "}} แถว {ระยะห่าง: 15 anchors.horizontalCenter: parent.horizontalCenter ป้ายกำกับ {id: failures text:" Failures: 0 "color:" red "} ป้ายกำกับ {id: hits text:" Hit: 0 "} ป้ายกำกับ {id : ข้อความชี้: "Points: 0" fontSize: "medium"}}

มาดูกันว่าในแต่ละองค์ประกอบที่ถูกคั่นด้วย {} เรามีคุณสมบัติที่แตกต่างกันอย่างไรในกรณีของป้ายกำกับและปุ่มเราจะเห็นว่าคุณสมบัติ "ข้อความ" คือข้อความที่แสดงคุณสมบัติที่ไม่ใช่ภาพที่สำคัญคือ ตัวระบุ "id »ซึ่งจะช่วยเราเมื่อเราใช้ตรรกะของแอปพลิเคชัน

ในตอนท้ายเราจะเห็นผลลัพธ์: