Membuat aplikasi untuk Ubuntu Touch [QML] - [Bahagian 1]

pengenalan

Di sini akan datang beberapa siri (seperti yang saya buat Vala), tetapi kali ini dengan permohonan untuk Ubuntu Touch, aplikasi pada mulanya adalah "sama" seperti di catatan dari Vala, iaitu, jenis permainan di mana kita mempunyai pertanyaan dan 4 jawapan dalam bentuk ujian, maka kita mempunyai tiga butang, satu untuk menghilangkan dua kemungkinan jawapan (50%), satu lagi untuk membekukan masa dan yang terakhir untuk pergi dari soalan.

Untuk melihat cara mula membuat projek, anda boleh melayari ini hantar (dokumentasi, buat projek ...), kerana kita akan memulakan dengan projek yang sudah dibuat.

Pengetahuan asas

Untuk membuat aplikasi, kami akan menggunakan komponen UbuntuWalaupun kita dapat membuat komponen kita sendiri, kita tidak akan melakukannya.

Komponen Ubuntu adalah komponen yang akan kita gunakan untuk aplikasi kita:

Untuk menggunakannya sama kita harus mengimport modul:

import Ubuntu.Komponen 0.1

Kita dapat menjumpai elemen yang berbeza dalam komponen, seperti butang, bar kemajuan dll. Kami boleh memuat turun projek di mana mereka menunjukkan sebahagian besar komponen berikut:

cawangan bzr lp: ubuntu-ui-toolkit 

Merancang aplikasi

Kami bermula dari gambar di mana aplikasi kami dibuat GTK, dalam kes ini kita akan menggunakan QML, sebenarnya kita akan membuat keseluruhan aplikasi dengan Qt Pantas (QML + JavaScript).

Aplikasi, seperti gambar, akan terdiri dari pertanyaan, masa, jawapan, pilihan dan poin. Satu-satunya perbezaan (selain dari "gaya"), kita akan mempunyai Tab di bahagian atas.

Untuk ini kita akan menggunakan elemen butang, label dan progressBar. Untuk struktur kita akan menggunakan Elemen Tiang y Baris.

Merancang susun atur skrin utama:

Kita mulakan dengan MainView, di mana Tab yang berbeza akan dijumpai, dalam hal ini kita akan mengerjakan susun atur skrin awal aplikasi kita.

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

Dimensi (untuk Ubuntu Touch):

lebar: unit.gu (50) tinggi: unit.gu (75)

Kami menentukan panjang dan lebar aplikasi kami, di mana lebarnya 50 (unit) dan panjang 75, sekarang kita akan memberikannya warna:

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

Kami mempunyai warna tajuk, badan dan kaki:

Seperti yang saya nyatakan sebelumnya, aplikasi akan disusun berdasarkan Tab:

    Tab {id: tab Set {objectName: "jocTab"} / * Tambahkan {objectName: "addQuestions"} * /}

Seperti yang kita lihat, kita mempunyai dua Tab, satu memberi komen (kita belum membuatnya) dan satu lagi untuk dimainkan (yang sekarang akan kita buat). Untuk membuat Tab tersebut, kami akan membuat fail qml baru (Tambahkan baru -> Qt -> Fail QML -> ...), nama fail tersebut akan Permainan.qml.

Baiklah, mari kita ubah Game.qml sedemikian rupa sehingga kita mengubahnya menjadi Tab, yang di dalamnya memiliki halaman (Halaman):

import QtQuick 2.0 import Ubuntu.Komponen 0.1 Tab {tajuk: Halaman i18n.tr ("Game") {}}

Di dalam halaman, kita akan mula menyusun unsur-unsur yang kita sebutkan dalam reka bentuk. Lajur yang akan merangkumi semua elemen di dalamnya (ia akan meletakkannya secara menegak), maka kita akan menyusun elemennya mengikut urutan: Label, ProgressBar, 4 butang; dan untuk meletakkan pilihan, kami akan menggunakan elemen Row untuk meletakkannya secara mendatar.

Lajur {anchors.top: Gamepage.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Question?" anchor.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Butang {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Butang {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Butang {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Butang {id: teks resp4: "Respons 4" anchor .horizontalCenter: parent.horizontalCenter} Baris {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Butang {id: b50 text: "50%"} Butang {id: bCon text: "Freeze"} Butang {id: bNext text: " Seterusnya "}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: Failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : teks mata: "Poin: 0" fontSize: "medium"}}

Mari kita lihat bagaimana di dalam setiap elemen yang dibatasi oleh {} kita mempunyai sifat yang berbeza, sekiranya label dan butang kita dapat melihat bahawa sifat "teks" adalah teks yang ditunjukkannya, harta bukan visual yang penting adalah pengenal "id», Yang akan membantu kita ketika kita melaksanakan logik aplikasi.

Pada akhirnya kita dapat melihat hasilnya: