Δημιουργία εφαρμογής για το Ubuntu Touch [QML] - [Μέρος 1]

Εισαγωγή

Εδώ θα έρθει μια σειρά από δημοσιεύσεις (όπως αυτά που έκανα Vala), αλλά αυτή τη φορά με αίτηση για Ubuntu Touch, η εφαρμογή είναι αρχικά το "ίδιο" με το δημοσιεύσεις από Vala, δηλαδή, ένα είδος παιχνιδιού όπου έχουμε μια ερώτηση και 4 απαντήσεις με τη μορφή δοκιμής, τότε έχουμε τρία κουμπιά, ένα για να εξαλείψουμε δύο από τις πιθανές απαντήσεις (50%), ένα άλλο για να παγώσουμε το χρόνο και το τελευταίο από το ερώτηση.

Για να δείτε πώς να ξεκινήσετε τη δημιουργία ενός έργου, μπορείτε να το επισκεφτείτε θέση (τεκμηρίωση, δημιουργία έργου ...), αφού θα ξεκινήσουμε με το έργο που έχει ήδη δημιουργηθεί.

ΒΑΣΙΚΕΣ ΓΝΩΣΕΙΣ

Για να δημιουργήσουμε την εφαρμογή θα χρησιμοποιήσουμε τα στοιχεία του UbuntuΕνώ θα μπορούσαμε να δημιουργήσουμε τα δικά μας στοιχεία, δεν θα το κάνουμε σε αυτήν την περίπτωση.

Το Ubuntu Components είναι στοιχεία που θα χρησιμοποιήσουμε για την εφαρμογή μας:

Για να τα χρησιμοποιήσουμε το ίδιο πρέπει να εισαγάγουμε την ενότητα:

εισαγωγή Ubuntu. Συστατικά 0.1

Μπορούμε να βρούμε διαφορετικά στοιχεία μέσα στα στοιχεία, όπως κουμπιά, γραμμές προόδου κ.λπ. Μπορούμε να κατεβάσουμε ένα έργο όπου μας δείχνουν τα περισσότερα από τα παρακάτω στοιχεία:

bzr υποκατάστημα lp: ubuntu-ui-εργαλειοθήκη 

Σχεδιασμός της εφαρμογής

Ξεκινάμε από την εικόνα όπου έχουμε κάνει την εφαρμογή GTK, σε αυτήν την περίπτωση θα χρησιμοποιήσουμε QML, στην πραγματικότητα θα δημιουργήσουμε ολόκληρη την εφαρμογή με Γρήγορη (QML + το 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 Set {objectName: "jocTab"} / * Προσθήκη {objectName: "addQuestions"} * /}

Όπως βλέπουμε έχουμε δύο καρτέλες, μία σχολίασε (δεν την έχουμε δημιουργήσει ακόμα) και άλλη για να παίξουμε (την οποία θα δημιουργήσουμε τώρα). Για να δημιουργήσουμε την εν λόγω καρτέλα, θα δημιουργήσουμε ένα νέο αρχείο qml (Προσθήκη νέου -> Qt -> Αρχείο QML ->…), το όνομα του εν λόγω αρχείου θα είναι Game.qml.

Λοιπόν, ας τροποποιήσουμε το Game.qml με τέτοιο τρόπο ώστε να το μετατρέψουμε σε Καρτέλα, η οποία έχει μια σελίδα (Σελίδα):

εισαγωγή QtQuick 2.0 εισαγωγή Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Σελίδα {}}

Μέσα στη σελίδα θα αρχίσουμε να κατασκευάζουμε τα στοιχεία που αναφέρουμε στη σχεδίαση. Μια στήλη που θα περιλαμβάνει όλα τα στοιχεία μέσα (θα τα τοποθετήσει κάθετα), τότε θα τακτοποιήσουμε τα στοιχεία: Ετικέτα, ProgressBar, τα 4 κουμπιά. και για να θέσουμε τις επιλογές, θα χρησιμοποιήσουμε το στοιχείο Row για να τις τοποθετήσουμε οριζόντια.

Στήλη {anchors.top: Gamepage.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Question?" 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} Σειρά {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bΕπόμενο κείμενο: " Επόμενο "}} Σειρά {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: Failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Ετικέτα {id : κείμενο σημείων: "Πόντοι: 0" fontSize: "medium"}}

Ας δούμε πώς μέσα σε κάθε στοιχείο που οριοθετείται από το {} έχουμε διαφορετικές ιδιότητες, στην περίπτωση της ετικέτας και των κουμπιών μπορούμε να δούμε ότι η ιδιότητα "κείμενο" είναι το κείμενο που δείχνει, μια σημαντική μη οπτική ιδιότητα είναι το αναγνωριστικό "αναγνωριστικό" », Το οποίο θα μας βοηθήσει όταν εφαρμόζουμε τη λογική της εφαρμογής.

Στο τέλος μπορούμε να δούμε το αποτέλεσμα: