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

การสร้างแอพสำหรับ Ubuntu Touch

ส่วนที่สามของชุดโพสต์นี้ (ส่วนแรก, ส่วนที่สอง) ที่เรากำลังสร้างแอปพลิเคชัน Ubuntu Touch หรือสำหรับสิ่งเดียวกัน อูบุนตู เดสก์ทอป. ฉันจะเพิ่มส่วนที่เกิดขึ้นกับฉันในโพสต์ก่อนหน้านี้และนั่นก็คือแม้ว่าเราจะเพิ่มตัวแปรของความล้มเหลวการเข้าชมและคะแนน แต่ก็ไม่ปรากฏบนหน้าจอนั่นเป็นเพราะเราไม่ได้เปลี่ยน คุณสมบัติข้อความของป้ายกำกับ:

                ป้ายกำกับ {id: failures text: "Failures:" + nfaults color: "red"} ป้ายกำกับ {id: hits text: "hits:" + born} ป้ายกำกับ {id: points text: "Points:" + npoints fontSize: "medium "}

ความต่อเนื่องของตรรกะของเกม

เวลา

อย่างที่เราทราบกันดีอยู่แล้วแถบความคืบหน้าจะแสดงเวลาที่เราต้องตอบคำถาม ในการจัดการเวลาที่เราจะใช้ Timer ตัวจับเวลาเป็นองค์ประกอบที่ทำซ้ำในช่วงเวลา x มิลลิวินาทีในกรณีนี้แต่ละช่วงเวลาเราจะบอกให้มันเพิ่มความคืบหน้าของ ProgressBar แต่ก่อนที่ฉันจะดูว่ามันถึงจุดสิ้นสุดของเวลาหรือไม่ถ้ามันถึงจุดสิ้นสุดเราต้องหักลบชีวิต

คุณสามารถดูบรรทัดรหัสที่เรายังไม่ได้ติดตั้ง (PopupUtils.open (กล่องโต้ตอบ)) บรรทัดนี้คือการเปิดบทสนทนาตอนจบในกรณีที่เราไม่มีชีวิตอีกต่อไป (กำจัดข้อบกพร่อง 3 ข้อ) ต่อไปในโพสต์นี้เราจะดูวิธีการทำบทสนทนานี้

รหัสจับเวลา (เราสามารถวางไว้ด้านล่าง ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 repeat: true running: true onTriggered: {if (time.value <time.maximumValue) time.value + = 1.0 else {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (โต้ตอบ)}} }}

อย่างที่เราเห็นใน onTriggered เราใส่รหัสที่จะเพิ่มแถบความคืบหน้าโดยเพิ่ม 1 หน่วยทุกๆ 100 (ระยะห่าง) มิลลิวินาที โปรดทราบว่าเราได้เพิ่มแอตทริบิวต์สองรายการให้กับ ProgressBar, MinimumValue และ maximumValue ซึ่งตามที่คุณเห็นคือค่าสูงสุดและค่าต่ำสุด

ในการเริ่มและหยุดตัวจับเวลา:

simpletimer.start () simpletimer.stop ()

ตัวเลือก (50%, Freeze และ Next)

ก่อนอื่นให้สร้างตัวแปรสามตัวที่ควบคุมว่าตัวเลือกสามารถใช้ได้เพียงครั้งเดียว:

    คุณสมบัติ int เปอร์เซ็นต์: 0 คุณสมบัติ int ด้วย: 0 คุณสมบัติ int ถัดไป: 0

ลด 50%

ปุ่ม {id: b50 text: "50%" onClicked: {if (percent == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. enable = false} else if (correct == 2) {resp1.enabled = false resp4.enabled = false} else if (correct == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} เปอร์เซ็นต์ = 1}}

ด้วยการเปิดใช้งาน = เท็จสิ่งที่เราทำคือวางปุ่มเพื่อไม่ให้กดในลักษณะที่เราได้รับคำตอบที่ถูกต้องด้วย aDocument.contents.questions [num] ถูกต้องและจากที่นี่ขึ้นอยู่กับว่าข้อใดถูกต้อง«เรา กำจัด»สองปุ่มที่ไม่ได้

ตรึง

                ปุ่ม {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

นี่เป็นหนึ่งในวิธีที่ง่ายเราต้องหยุดตัวจับเวลาด้วย simpletimer.stop () ใช่เราต้องเปิดอีกครั้ง (และตั้งค่า progressBar เป็น 0) เมื่อเราผ่านคำถาม

ถัดไป

                 ปุ่ม {id: bNext text: "Next" onClicked: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

เราใช้ฟังก์ชันที่เราสร้างไว้แล้วเพื่อส่งผ่านคำถาม (nextQuestion)

บทสนทนา

ในการจบเกมเราจะใช้ Dialog ไม่ว่าจะเป็นเพราะเราชนะ (ไม่มีคำถามอีกแล้ว) หรือเพราะเราแพ้ (เราทำผิด 3 ครั้ง) ในการใช้กล่องโต้ตอบเราต้องนำเข้าโมดูล:

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

เราจะสร้างกล่องโต้ตอบที่บอกว่าเราแพ้:

        คอมโพเนนต์ {id: dialog Dialog {id: dialog title: "Game Over!" text: "คุณเสียชีวิตทั้งหมด :(" ปุ่ม {text: "Quit" onClicked: Qt.quit ()} ปุ่ม {text: "Start over" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 การเกิด = 0 PopupUtils.close (บทสนทนา)}}}}

เรามีปุ่มสองปุ่มปุ่มหนึ่งเพื่อปิดแอปพลิเคชัน (Qt.quit ()) และอีกปุ่มหนึ่งเพื่อเริ่มเกมใหม่ เราเริ่มต้นตัวแปรเป็น 0 และปิดกล่องโต้ตอบ

ในการเปิดกล่องโต้ตอบ:

PopupUtils.open (กล่องโต้ตอบ)

ในการปิด:

PopupUtils.close (บทสนทนา)

มาดูบทสนทนาในตอนท้ายของเกม:

เราสามารถสร้างกล่องโต้ตอบที่เหมือนกันทุกประการโดยการเปลี่ยนตัวระบุและข้อความที่ระบุว่าเราชนะ

การออกแบบคำถามโดยรวม

เมื่อเราออกแบบใน GTKเราสร้างกล่องโต้ตอบ แต่คราวนี้เราจะทำในแท็บอย่างไรก็ตามมันจะมีโครงสร้างเดียวกัน:

อย่างที่เราเห็นเราจะใช้ Label, TextArea เพื่อเขียนคำถาม, 4 TextField และ 4 Switch; ในที่สุดปุ่มสำหรับเพิ่มคำถาม ลองดูรหัส:

นำเข้า QtQuick 2.0 นำเข้า Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Questions") หน้า {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 ระยะห่าง: 15 width: parent.width height: parent.height - 50 ป้ายกำกับ {id: question text: "เพิ่มคำถามในฐานข้อมูล:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Row {ระยะห่าง: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 1" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {ตรวจสอบ: false}} ปุ่ม {text: "Add +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

มาดูกันว่าหน้าตาเป็นอย่างไร:

หากตอนนี้เราทดสอบสวิตช์เราจะเห็นว่าเราสามารถทำเครื่องหมายทั้งหมดเป็นคำถามที่ถูกต้องและมีเพียงคำถามเดียวเท่านั้นที่เป็นไปได้ดังนั้นเราจะดำเนินการต่อไปนี้: เราจะสามารถระบุตัวระบุให้กับสวิตช์แต่ละตัวได้ (รวมถึง ฟิลด์ข้อความเนื่องจากเราจะต้องได้รับเนื้อหาเพื่อบันทึกลงในฐานข้อมูล) ตามคำตอบของคุณและเมื่อเราคลิกเราจะทำให้คนอื่น ๆ ทั้งหมดอยู่ในโหมด checked = false:

             แถว {ระยะห่าง: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Switch {id: sw1 checked: false onClicked: {if (sw1.checked == true) {sw2. ตรวจสอบ = เท็จ sw3.checked = false sw4.checked = false}}}}

ถ้าเราลองตอนนี้เราจะเห็นว่าเราทำเครื่องหมายเพียงอันเดียวได้อย่างไร