Ubuntu Touch için bir uygulama oluşturma [QML] - [Bölüm 3]

Ubuntu Touch için bir uygulama oluşturma

Bu yazı dizisinin üçüncü bölümü (Kısım, ikinci kısım) nerede uygulama oluşturuyoruz Ubuntu Dokunmatik ya da aynısı için Ubuntu masaüstü. Önceki yazıda başıma gelen bir bölümü ekleyeceğim ve bu, başarısızlıkların, isabetlerin ve puanların değişkenlerini artırmamıza rağmen ekranda gösterilmediler, çünkü Etiketlerin text özelliğini değiştirmedik:

                Etiket {id: başarısızlık metni: "Hatalar:" + nfaults rengi: "kırmızı"} Etiket {id: isabet metni: "İsabet:" + born} Etiket {id: puan metni: "Puan:" + npoints fontSize: "orta "}

Oyun mantığının devamı

Zaman

Zaten bildiğimiz gibi, progressBar bir soruyu yanıtlamamız gereken zamanı gösterir. Bir Zamanlayıcı kullanacağımız zamanı yönetmek için, zamanlayıcı x milisaniye aralığında tekrarlanan bir öğedir, bu durumda her aralıkta ProgressBar'ın ilerlemesini artırmasını söyleyeceğiz; Ama zamanın sonuna gelip gelmediğine bakmadan önce, eğer sona ulaşırsa, bir hayat çıkarmalıyız.

Henüz uygulamadığımız bir kod satırını görebilirsiniz (PopupUtils.open (iletişim kutusu)), bu satır, daha fazla canımız olmaması durumunda (3 hata giderildi) oyunsonu diyaloğunu açmaktır, bu yazının ilerleyen kısımlarında bu diyaloğu nasıl yapacağımızı göreceğiz.

Zamanlayıcı kodu (bunu ProgressBar'ın altına koyabiliriz):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 tekrar: 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 (dialog)}} }}

Gördüğümüz gibi, onTriggered'a her 1'de 100 birim ekleyerek ilerleme çubuğunu artıracak kodu koyduk (aralık) mili saniye. ProgressBar'a, görebileceğiniz gibi maksimum değer ve minimum değer olan minimumValue ve maximumValue olmak üzere iki özellik eklediğimizi unutmayın.

Zamanlayıcıyı başlatmak ve durdurmak için:

simpletimer.start () simpletimer.stop ()

Seçenekler (% 50, Dondur ve Sonraki)

Öncelikle, seçeneklerin yalnızca bir kez kullanılabileceğini kontrol eden üç değişken oluşturalım:

    özellik int yüzdesi: 0 özellik int ile: 0 özellik int sonraki: 0

%50

Düğme {id: b50 metin: "% 50" onClicked: {if (yüzde == 0) {var right = aDocument.contents.questions [num] .correcta if (right == 1) {resp2.enabled = false resp3. enable = false} else if (right == 2) {resp1.enabled = false resp4.enabled = false} else if (right == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = yanlış resp1.enabled = false} yüzde = 1}}

Enable = false ile yaptığımız şey düğmeye basılmayacak şekilde, aDocument.contents.questions [num] ile doğru cevabı alacak şekilde yerleştirmektir. Doğru ve buradan hangisinin doğru olduğuna bağlı olarak «eliyoruz »Olmayan iki düğme.

Donmak

                Düğme {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Bu kolay olanlardan biri, sadece simpletimer.stop () ile zamanlayıcıyı durdurmalıyız, evet, soru üzerinden geçerken onu tekrar açmalıyız (ve progressBar'ı 0'a ayarlamalıyız).

Sonraki

                 Düğme {id: bNext text: "Sonraki" onClicked: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Soruyu (nextQuestion) geçmek için oluşturduğumuz işlevi kullanıyoruz.

Diyaloglar

Oyunu bitirmek için ya kazandığımız için (başka soru yok) ya da kaybettiğimiz için (3 hata yaptık) bir Diyalog kullanacağız, diyalogları kullanmak için modülü içe aktarmamız gerekir:

Ubuntu.Components.Popups 0.1'i içe aktar

Bize kaybettiğimizi söyleyen diyaloğu oluşturacağız:

        Bileşen {id: dialog Dialog {id: dialogue title: "Game Over!" text: "Tüm canları kaybettiniz :(" Button {text: "Quit" onClicked: Qt.quit ()} Button {text: "Baştan başla" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion ( num) npoints = 0 doğum = 0 PopupUtils.close (diyalog)}}}}

Biri uygulamayı kapatmak (Qt.quit ()) ve diğeri oyunu yeniden başlatmak için iki düğmemiz var. Değişkenleri 0 olarak başlatıyoruz ve diyaloğu kapatıyoruz.

Diyaloğu açmak için:

PopupUtils.open (iletişim kutusu)

Kapatmak için:

PopupUtils.close (diyalog)

Oyunun sonundaki diyaloğa bakalım:

Tanımlayıcıyı ve kazandığımızı söylediği metni değiştirerek tamamen aynı şekilde bir diyalog oluşturabiliriz.

Soru kümesini tasarlama

Onu tasarladığımızda GTK, bir diyalog yaratıyoruz ama bu sefer bunu bir Sekmede yapacağız, zaten aynı yapıya sahip olacak:

Gördüğümüz gibi, soruyu yazmak için bir Etiket, bir TextArea, 4 TextField ve 4 Switch kullanacağız; son olarak, soruyu eklemek için bir Düğme. Sadece koda bakalım:

içe aktar QtQuick 2.0 içe aktarma Ubuntu.Components 0.1 Sekme {title: i18n.tr ("+ Sorular") Sayfa {id: pageAdd Sütun {anchors.top: pageAdd.top anchors.topMargin: 50 aralık: 15 genişlik: parent.width yükseklik: parent.height - 50 Etiket {id: soru metni: "Veritabanına bir soru ekleyin:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {genişlik: parent.width - 20 yükseklik: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Satır {aralık: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 1" genişliği: 300} Anahtar {işaretlendi: false}} Satır {aralığı: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" width: 300} Anahtar {işaretlendi: false}} Satır {aralığı: 15 anchors.horizontalCenter: üst. horizontalCenter TextField {placeholderText: "Response 3" genişliği: 300} Anahtar {işaretlendi: false}} Satır {aralığı: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Anahtar {işaretli: false}} Düğme {metin: "Ekle +" anchors.horizontalCenter: parent.horizontalCenter genişliği: parent.width - 20}}}}

Bakalım nasıl görünüyor:

Şimdi Anahtarları test edersek, hepsini doğru soru olarak işaretleyebileceğimizi ve elbette yalnızca birinin olabileceğini göreceğiz, bu nedenle aşağıdakileri yapacağız: her bir anahtara bir tanımlayıcı verebileceğiz (ayrıca cevabınıza göre içeriği veritabanına kaydetmemiz gerekeceğinden metin alanları) ve tıkladığımızda diğerlerini işaretli = yanlış moduna koyacağız:

             Satır {boşluk: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Anahtar {id: sw1 işaretlendi: false onClicked: {if (sw1.checked == true) {sw2. işaretli = yanlış sw3.checked = yanlış sw4.checked = yanlış}}}}

Şimdi denersek, nasıl sadece birini işaretleyebileceğimizi göreceğiz.