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

Tạo ứng dụng cho Ubuntu Touch

Phần thứ ba của loạt bài đăng này (phần đầu tiên, phần thứ hai) nơi chúng tôi đang xây dựng một ứng dụng để Ubuntu Touch hoặc cho giống nhau Ubuntu máy tính để bàn. Tôi sẽ bổ sung một phần mà tôi đã bỏ qua trong bài viết trước và đó là mặc dù chúng tôi đã tăng các biến số lỗi, số lần truy cập và điểm, nhưng chúng không được hiển thị trên màn hình, đó là vì chúng tôi đã không thay đổi thuộc tính văn bản của Nhãn:

                Nhãn {id: failed text: "Failures:" + nfaults color: "red"} Nhãn {id: hits text: "hits:" + sinh} Nhãn {id: points text: "Points:" + npoints fontSize: "medium "}

Tiếp tục logic trò chơi

Thời gian

Như chúng ta đã biết, thanh tiến trình hiển thị thời gian chúng ta phải trả lời một câu hỏi. Để quản lý thời gian, chúng ta sẽ sử dụng Timer, timer là một phần tử được lặp lại trong khoảng thời gian x mili giây, trong trường hợp này, mỗi khoảng thời gian chúng ta sẽ yêu cầu nó tăng tiến trình của ProgressBar; Nhưng trước khi xem đã hết thời hay chưa, nếu đã hết thì phải trừ đi một kiếp.

Bạn có thể thấy một dòng mã mà chúng tôi chưa triển khai (PopupUtils.open (hộp thoại)), câu thoại này là để mở lời thoại cuối trò chơi trong trường hợp chúng ta không còn mạng nữa (đã loại bỏ 3 con bọ), ở phần sau của bài đăng này, chúng ta sẽ xem cách thực hiện câu thoại này.

Mã hẹn giờ (chúng ta có thể đặt nó bên dưới ProgressBar):

       ProgressBar {id: time anchor.horizontalCenter: parent.horizontalCenter MinimumValue: 0 MaximumValue: 300} Timer {id: simpletimer c: 100 repeat: 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 (hộp thoại)}} }}

Như chúng ta có thể thấy, trong onTriggered, chúng tôi đặt mã sẽ tăng thanh tiến trình thêm 1 đơn vị cứ sau 100 (khoảng thời gian) mili giây. Lưu ý rằng chúng tôi đã thêm hai thuộc tính vào ProgressBar, MinimumValue và MaximumValue, như bạn có thể thấy, là giá trị lớn nhất và giá trị nhỏ nhất.

Để bắt đầu và dừng bộ hẹn giờ:

simpletimer.start () simpletimer.stop ()

Tùy chọn (50%, Cố định và Tiếp theo)

Đầu tiên, hãy tạo ba biến kiểm soát rằng các tùy chọn chỉ có thể được sử dụng một lần:

    thuộc tính int phần trăm: 0 thuộc tính int với: 0 thuộc tính int next: 0

50%

Nút {id: b50 text: "50%" onClicked: {if (phần trăm == 0) {var đúng = aDocument.contents.questions [num] .correcta if (đúng == 1) {resp2.enabled = false resp3. enable = false} else if (đúng == 2) {resp1.enabled = false resp4.enabled = false} else if (đúng == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} phần trăm = 1}}

Với enable = false, những gì chúng tôi làm là đặt nút để nó không thể được nhấn, theo cách mà chúng tôi có được câu trả lời chính xác với aDocument.contents.questions [num]. Chính xác và từ đây tùy thuộc vào cái nào đúng «chúng tôi loại bỏ »Hai nút không có.

Đông cứng

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

Đây là một trong những cách dễ dàng, chúng ta chỉ cần dừng bộ đếm thời gian bằng simpletimer.stop (), vâng, chúng ta phải bật lại nó (và đặt ProgressBar thành 0) khi chúng ta hoàn thành câu hỏi.

Sau

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

Chúng tôi sử dụng hàm mà chúng tôi đã tạo để chuyển câu hỏi (nextQuestion).

Đối thoại

Để kết thúc trò chơi, chúng ta sẽ sử dụng Hộp thoại, vì chúng ta đã thắng (không còn câu hỏi nào nữa) hoặc vì chúng ta đã thua (chúng ta đã mắc 3 sai lầm), để sử dụng hộp thoại, chúng ta phải nhập mô-đun:

nhập Ubuntu.Components.Popups 0.1

Chúng tôi sẽ tạo hộp thoại cho chúng tôi biết rằng chúng tôi đã mất:

        Thành phần {id: hộp thoại Hộp thoại {id: đối thoại title: "Trò chơi kết thúc!" text: "Bạn đã mất tất cả mạng sống :(" Nút {text: "Quit" onClicked: Qt.quit ()} Nút {text: "Bắt đầu lại" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 sinh = 0 PopupUtils.close (đối thoại)}}}}

Chúng tôi có hai nút, một để đóng ứng dụng (Qt.quit ()) và một nút khác để bắt đầu trò chơi lại. Chúng tôi khởi tạo các biến thành 0 và đóng hộp thoại.

Để mở hộp thoại:

PopupUtils.open (hộp thoại)

Để đóng nó:

PopupUtils.close (đối thoại)

Cùng xem đoạn hội thoại cuối game:

Chúng ta có thể tạo một hộp thoại giống hệt nhau bằng cách thay đổi mã nhận dạng và văn bản mà nó nói rằng chúng ta đã thắng.

Thiết kế tổng hợp câu hỏi

Khi chúng tôi thiết kế nó trong GTK, chúng tôi tạo một hộp thoại, nhưng lần này chúng tôi sẽ làm điều đó trong một Tab, dù sao thì nó cũng sẽ có cấu trúc tương tự:

Như chúng ta thấy, chúng ta sẽ sử dụng một Label, một TextArea để viết câu hỏi, 4 TextField và 4 Switch; cuối cùng là Nút để thêm câu hỏi. Hãy chỉ nhìn vào mã:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Câu hỏi") Trang {id: pageAdd Column {anchor.top: pageAdd.top anchorrs.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Nhãn {id: question text: "Thêm câu hỏi vào cơ sở dữ liệu:" anchorrs.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchorrs.horizontalCenter: parent.horizontalCenter} Row {spacing: 15 anchor.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Phản hồi 1" width: 300} Chuyển {đã kiểm tra: false}} Hàng {spacing: 15 anchor.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Phản hồi 2" width: 300} Chuyển {kiểm: false}} Hàng {spacing: 15 anchor.horizontalCenter: parent. ngangCenter TextField {placeholderText: "Phản hồi 3" chiều rộng: 300} Chuyển {đã kiểm tra: false}} Hàng {spacing: 15 anchor.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Phản hồi 4" width: 300} Chuyển {đã kiểm tra: false}} Nút {text: "Thêm +" anchorrs.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

Hãy xem nó trông như thế nào:

Nếu bây giờ chúng tôi kiểm tra các Công tắc, chúng tôi sẽ thấy rằng chúng tôi có thể đánh dấu tất cả chúng là câu hỏi chính xác và tất nhiên chỉ có thể là câu hỏi đúng, do đó chúng tôi sẽ làm như sau: chúng tôi sẽ có thể cung cấp một số nhận dạng cho mỗi công tắc (cũng các trường văn bản vì chúng tôi sẽ phải lấy nội dung để lưu nó vào cơ sở dữ liệu) theo câu trả lời của bạn và khi chúng tôi nhấp vào nó, chúng tôi sẽ đặt tất cả các trường khác ở chế độ check = false:

             Hàng {spacing: 15 anchor.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Phản hồi 1" width: 300} Chuyển {id: sw1 đã kiểm tra: false onClicked: {if (sw1.checked == true) {sw2. đã kiểm tra = false sw3.checked = false sw4.checked = false}}}}

Nếu chúng ta thử nó bây giờ, chúng ta sẽ thấy làm thế nào chúng ta chỉ có thể đánh dấu một.