Membuat aplikasi untuk Ubuntu Touch [QML] - [Part 3]

Membuat aplikasi untuk Ubuntu Touch

Bagian ketiga dari seri posting ini (bagian satu, bagian kedua) tempat kami membuat aplikasi Ubuntu Sentuh atau untuk hal yang sama Ubuntu Desktop. Saya akan menambahkan bagian yang terjadi pada saya di posting sebelumnya, dan itu adalah bahwa meskipun kami meningkatkan variabel kegagalan, hit dan poin, kemudian mereka tidak ditampilkan di layar, itu karena kami tidak mengubah properti teks Label:

                Label {id: teks kegagalan: "Kegagalan:" + warna default: "merah"} Label {id: hits teks: "hits:" + lahir} Label {id: poin teks: "Poin:" + npoints fontSize: "medium "}

Kelanjutan dari logika permainan

Tiempo

Nah, seperti yang sudah kita ketahui, progressBar menunjukkan waktu kita harus menjawab pertanyaan. Untuk mengatur waktu kita akan menggunakan Timer, timer adalah elemen yang diulangi pada interval x milidetik, dalam hal ini setiap interval akan kita perintahkan untuk meningkatkan progres ProgressBar; Tetapi sebelum saya melihat apakah itu telah mencapai akhir zaman atau tidak, jika itu mencapai akhir, kita harus mengurangi sebuah kehidupan.

Anda dapat melihat baris kode yang belum kami implementasikan (PopupUtils.open (dialog)), baris ini untuk membuka dialog endgame jika kita tidak memiliki nyawa lagi (3 bug dihilangkan), nanti dalam posting ini kita akan melihat bagaimana melakukan dialog ini.

Kode pengatur waktu (kita dapat meletakkannya di bawah ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 ulangi: benar berjalan: 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} lain {simpletimer.stop () PopupUtils.open (dialog)}} }}

Seperti yang bisa kita lihat, di onTriggered kita meletakkan kode yang akan meningkatkan bilah kemajuan menambahkan 1 unit setiap 100 (selang) mili-detik. Perhatikan bahwa kami telah menambahkan dua atribut ke ProgressBar, minimumValue dan maximumValue, yang, seperti yang Anda lihat, adalah nilai maksimum dan nilai minimum.

Untuk memulai dan menghentikan timer:

simpletimer.start () simpletimer.stop ()

Opsi (50%, Bekukan dan Berikutnya)

Pertama, mari buat tiga variabel yang mengontrol bahwa opsi hanya dapat digunakan sekali:

    property int persen: 0 property int dengan: 0 property int next: 0

50%

Tombol {id: b50 text: "50%" onClicked: {if (persen == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. diaktifkan = salah} lain jika (benar == 2) {resp1.enabled = false resp4.enabled = false} lain jika (benar == 3) {resp1.enabled = false resp4.enabled = false} lain {resp2.enabled = false resp1.enabled = false} persen = 1}}

Dengan enabled = false yang kita lakukan adalah meletakkan tombol sehingga tidak bisa ditekan, sedemikian rupa sehingga kita mendapatkan jawaban yang benar dengan aDocument.contents.questions [num]. Benar dan dari sini tergantung mana yang benar «kita hilangkan »Dua tombol yang bukan.

Membekukan

                Tombol {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Ini salah satu cara yang mudah, kita hanya perlu menghentikan timer dengan simpletimer.stop (), ya, kita harus menyalakannya lagi (dan menyetel progressBar ke 0) saat kita menyampaikan pertanyaan.

Selanjutnya

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

Kami menggunakan fungsi yang telah kami buat untuk meneruskan pertanyaan (nextQuestion).

Dialog

Untuk mengakhiri permainan kita akan menggunakan Dialog, baik karena kita menang (tidak ada pertanyaan lagi) atau karena kita kalah (kita telah membuat 3 kesalahan), untuk menggunakan dialog kita harus mengimpor modul:

impor Ubuntu.Components.Popups 0.1

Kami akan membuat dialog yang memberi tahu kami bahwa kami telah kalah:

        Komponen {id: dialog Dialog {id: dialog title: "Game Over!" teks: "Anda kehilangan semua nyawa :(" Tombol {teks: "Keluar" onClicked: Qt.quit ()} Tombol {teks: "Mulai kembali" warna: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion ( num) npoints = 0 kelahiran = 0 PopupUtils.close (dialog)}}}}

Kami memiliki dua tombol, satu untuk menutup aplikasi (Qt.quit ()) dan tombol lainnya untuk memulai permainan kembali. Kami menginisialisasi variabel ke 0 dan menutup dialog.

Untuk membuka dialog:

PopupUtils.open (dialog)

Untuk menutupnya:

PopupUtils.close (dialog)

Mari kita lihat dialog di akhir permainan:

Kita dapat membuat dialog yang persis sama dengan mengubah pengenal dan teks yang menyatakan bahwa kita telah menang.

Mendesain agregat pertanyaan

Saat kami mendesainnya GTK, kami membuat dialog, tetapi kali ini kami akan melakukannya di Tab, namun strukturnya sama:

Seperti yang bisa kita lihat, kita akan menggunakan Label, TextArea untuk menulis pertanyaan, 4 TextField dan 4 Switch; akhirnya, Tombol untuk menambahkan pertanyaan. Mari kita lihat kodenya:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Questions") Halaman {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 spasi: 15 lebar: induk.width tinggi: parent.height - 50 Label {id: teks pertanyaan: "Tambahkan pertanyaan ke database:" 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} Baris {spasi: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Respon 1" lebar: 300 </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>} Beralih {diperiksa: salah}} Baris {spasi: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" width: 300} Switch {check: false}} Baris {spacing: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {check: false}} Baris {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {diperiksa: salah}} Tombol {teks: "Add +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

Mari kita lihat tampilannya:

Jika sekarang kita menguji Switch, kita akan melihat bahwa kita dapat menandai semuanya sebagai pertanyaan yang benar, dan tentu saja hanya satu yang bisa, oleh karena itu kita akan melakukan hal berikut: kita akan dapat memberikan pengenal untuk setiap sakelar (juga ke bidang teks karena kita harus mendapatkan konten untuk menyimpannya ke database) sesuai dengan jawaban Anda, dan ketika kami mengkliknya, kami akan menempatkan semua yang lain dalam mode check = false:

             Baris {spasi: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Ganti {id: sw1 diperiksa: false onClicked: {if (sw1.checked == true) {sw2. diperiksa = false sw3.checked = false sw4.checked = false}}}}

Jika kita mencobanya sekarang kita akan melihat bagaimana kita hanya dapat menandai satu.