Tạo ứng dụng cho Ubuntu Touch [QML] - [Phần 1]

Giới thiệu

Ở đây sẽ có một loạt các bài đăng (như những thứ tôi đã làm với Vala), nhưng lần này với một ứng dụng cho Ubuntu Touch, ứng dụng này ban đầu "giống" như trong bài đăng từ Vala, nghĩa là, một loại trò chơi trong đó chúng ta có một câu hỏi và 4 câu trả lời dưới dạng một bài kiểm tra, sau đó chúng ta có ba nút, một nút để loại bỏ hai trong số các câu trả lời có thể (50%), một nút khác để cố định thời gian và nút cuối cùng để bắt đầu câu hỏi.

Để xem cách bắt đầu tạo dự án, bạn có thể truy cập trang này gửi (tài liệu, tạo dự án ...), vì chúng ta sẽ bắt đầu với dự án đã được tạo.

Kiến thức cơ bản

Để tạo ứng dụng, chúng tôi sẽ sử dụng các thành phần của UbuntuTrong khi chúng tôi có thể tạo các thành phần của riêng mình, chúng tôi sẽ không làm trong trường hợp này.

Thành phần Ubuntu là các thành phần mà chúng tôi sẽ sử dụng cho ứng dụng của mình:

Để sử dụng chúng giống nhau, chúng ta phải nhập mô-đun:

nhập Ubuntu.Components 0.1

Chúng tôi có thể tìm thấy các yếu tố khác nhau trong các thành phần, chẳng hạn như các nút, thanh tiến trình, v.v. Chúng tôi có thể tải xuống một dự án mà họ cho chúng tôi thấy hầu hết các thành phần sau:

chi nhánh bzr lp: ubuntu-ui-toolkit 

Thiết kế ứng dụng

Chúng tôi bắt đầu từ hình ảnh mà chúng tôi đã tạo ứng dụng với GTK, trong trường hợp này, chúng tôi sẽ sử dụng QML, trên thực tế, chúng tôi sẽ tạo toàn bộ ứng dụng với Qt Nhanh (QML + JavaScript).

Ứng dụng, giống như hình ảnh, sẽ bao gồm câu hỏi, thời gian, câu trả lời, tùy chọn và điểm. Sự khác biệt duy nhất (ngoài "style"), sẽ là ở trên chúng ta sẽ có các Tab.

Đối với điều này, chúng tôi sẽ sử dụng các phần tử button, label và ProgressBar. Đối với cấu trúc, chúng tôi sẽ sử dụng Element Cột y Hàng.

Thiết kế bố cục của màn hình chính:

Chúng tôi bắt đầu với MainView, nơi các Tab khác nhau sẽ được tìm thấy, trong trường hợp này, chúng tôi sẽ làm việc trên bố cục của màn hình ban đầu của ứng dụng của chúng tôi.

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

Kích thước (cho Ubuntu Touch):

chiều rộng: đơn vị.gu (50) chiều cao: đơn vị.gu (75)

Chúng tôi xác định chiều dài và chiều rộng của ứng dụng của mình, trong đó chiều rộng sẽ là 50 (đơn vị) và chiều dài 75, bây giờ chúng tôi sẽ cung cấp cho nó màu sắc:

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

Chúng tôi có màu của đầu trang, nội dung và chân trang:

Như tôi đã đề cập trước đây, ứng dụng sẽ được cấu trúc bởi các Tab:

    Các tab {id: tab Đặt {objectName: "jocTab"} / * Thêm {objectName: "addQuestions"} * /}

Như chúng ta thấy, chúng ta có hai Tab, một đã nhận xét (chúng tôi chưa tạo) và một tab khác để chơi (bây giờ chúng tôi sẽ tạo). Để tạo Tab đã nói, chúng ta sẽ tạo một tệp qml mới (Thêm mới -> Qt -> Tệp QML ->…), tên của tệp đã nói sẽ là Game.qml.

Vâng, hãy sửa đổi Game.qml theo cách chúng tôi biến nó thành một Tab, bên trong có một trang (Trang):

import QtQuick 2.0 nhập Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Trang {}}

Trong trang này, chúng tôi sẽ bắt đầu cấu trúc các yếu tố mà chúng tôi đề cập trong thiết kế. Một cột sẽ bao gồm tất cả các phần tử bên trong (nó sẽ đặt chúng theo chiều dọc), sau đó chúng ta sẽ đặt các phần tử theo thứ tự: Label, ProgressBar, 4 nút; và để đặt các tùy chọn, chúng tôi sẽ sử dụng phần tử Hàng để đặt chúng theo chiều ngang.

Cột {anchor.top: Gamepage.top anchorrs.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Nhãn {id: question anchor.topMargin: 500 text: "Câu hỏi?" anchorrs.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchor.horizontalCenter: parent.horizontalCenter} Nút {id: resp1 text: "Response 1" anchorrs.horizontalCenter: parent.horizontalCenter} Nút {id: resp2 text: "Response 2" anchorrs.horizontalCenter: parent.horizontalCenter} Nút {id: resp3 text: "Response 3" anchorrs.horizontalCenter: parent.horizontalCenter} Nút {id: resp4 text: Neo "Response 4" .horiz NgangCenter: parent.horizontalCenter} Hàng {spacing: 15 anchor.horizontalCenter: parent.horizontalCenter Nút {id: b50 text: "50%"} Nút {id: bCon text: "Freeze"} Nút {id: bNext text: " Tiếp theo "}} Hàng {spacing: 15 anchor.horizontalCenter: parent.horizontalCenter Nhãn {id: fail text:" Failures: 0 "color:" red "} Nhãn {id: hits text:" Hit: 0 "} Nhãn {id : point text: "Points: 0" fontSize: "medium"}}

Hãy xem trong mỗi phần tử được phân tách bằng {} của nó, chúng ta có các thuộc tính khác nhau như thế nào, trong trường hợp nhãn và các nút, chúng ta có thể thấy rằng thuộc tính "text" là văn bản mà nó hiển thị, một thuộc tính quan trọng không trực quan là định danh "id », Điều này sẽ giúp chúng ta khi chúng ta triển khai logic ứng dụng.

Cuối cùng, chúng ta có thể thấy kết quả: