Ubuntu Touch 용 앱 만들기 [QML]-[Part 3]

Ubuntu Touch 용 앱 만들기

이 포스트 시리즈의 세 번째 부분 (첫 부분, ) 애플리케이션을 구축하는 곳 우분투 터치 또는 동일 우분투 데스크탑. 이전 게시물에서 나에게 일어난 부분을 추가 할 것입니다. 즉, 실패, 히트 및 포인트의 변수를 늘 렸지만 화면에 표시되지 않았습니다. 이는 Labels의 텍스트 속성을 변경하지 않았기 때문입니다.

                레이블 {id : 실패 텍스트 : "실패 :"+ nfaults 색상 : "red"} 레이블 {id : 히트 텍스트 : "Hit :"+ born} 레이블 {id : 포인트 텍스트 : "Points :"+ npoints fontSize : "medium "}

게임 로직의 연속

시간

이미 알고 있듯이 progressBar는 질문에 답해야하는 시간을 보여줍니다. Timer를 사용하여 시간을 관리하기 위해 타이머는 x 밀리 초 간격으로 반복되는 요소입니다.이 경우 각 간격은 ProgressBar의 진행률을 높이도록 지시합니다. 하지만 시간의 끝인지 아닌지보기 전에 끝이났다면 생명을 빼야합니다.

아직 구현하지 않은 코드 줄을 볼 수 있습니다 (PopupUtils.open (대화 상자)),이 줄은 더 이상 생명이없는 경우 (3 개의 버그가 제거됨) 최종 게임 대화를 여는 것입니다.이 게시물의 뒷부분에서이 대화를 수행하는 방법을 볼 것입니다.

타이머 코드 (ProgressBar 아래에 놓을 수 있음) :

       ProgressBar {id : time anchors.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 (dialog)}} }}

보시다시피 onTriggered에는 1 (간격) 밀리 초. ProgressBar에 최소값과 최대 값이라는 두 가지 속성을 추가했습니다. 보시다시피 최대 값과 최소값입니다.

타이머를 시작 및 중지하려면 :

simpletimer.start () simpletimer.stop ()

옵션 (50 %, 동결 및 다음)

먼저 옵션을 한 번만 사용할 수 있도록 제어하는 ​​세 가지 변수를 만들어 보겠습니다.

    property int percent : 0 property int with : 0 property int 다음 : 0

50%

버튼 {id : b50 text : "50 %"onClicked : {if (percent == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. enabled = false} else if (올바른 == 2) {resp1.enabled = false resp4.enabled = false} else if (올바른 == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = 거짓 resp1.enabled = 거짓} 퍼센트 = 1}}

enabled = false 인 경우 버튼을 누를 수 없도록 aDocument.contents.questions [num]으로 정답을 얻습니다. 정답 및 여기에서 어느 것이 올바른지에 따라«우리는 제거합니다. »두 개의 버튼이 없습니다.

얼다

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

이것은 쉬운 것 중 하나입니다. simpletimer.stop ()을 사용하여 타이머를 중지해야합니다. 예, 질문을 진행할 때 다시 켜고 progressBar를 0으로 설정해야합니다.

다음

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

질문 (nextQuestion)을 전달하기 위해 이미 생성 한 함수를 사용합니다.

대화

게임을 끝내려면 우리가 이겼 기 때문에 (더 이상 질문이 없음) 또는 졌기 때문에 (3 번의 실수를 했음) 대화 상자를 사용하여 대화 상자를 사용하여 모듈을 가져와야합니다.

가져 오기 Ubuntu.Components.Popups 0.1

잃어 버렸음을 알려주는 대화 상자를 만들 것입니다.

        컴포넌트 {id : dialog Dialog {id : 대화 제목 : "Game Over!" text : "You lost all life :("Button {text : "Quit"onClicked : Qt.quit ()} Button {text : "Start over"color : UbuntuColors.orange onClicked : {num = 0; Logica.next) num) npoints = 0 출생 = 0 PopupUtils.close (dialogue)}}}}

두 개의 버튼이 있는데, 하나는 응용 프로그램을 닫는 것 (Qt.quit ())이고 다른 하나는 게임을 다시 시작하는 버튼입니다. 변수를 0으로 초기화하고 대화 상자를 닫습니다.

대화 상자를 열려면 :

PopupUtils.open (대화 상자)

닫으려면 :

PopupUtils.close (대화)

게임이 끝나면 대화를 봅시다 :

우분투 터치

우리는 우리가 이겼다고 말하는 식별자와 텍스트를 변경하여 정확히 동일한 대화 상자를 만들 수 있습니다.

질문 집합 디자인

디자인 할 때 GTK, 대화 상자를 만들지 만 이번에는 탭에서 수행합니다. 어쨌든 동일한 구조를 갖습니다.

보시다시피 Label, TextArea를 사용하여 질문을 작성합니다. 4 TextField 및 4 Switch; 마지막으로 질문을 추가하는 버튼입니다. 코드를 살펴 보겠습니다.

import QtQuick 2.0 import Ubuntu.Components 0.1 탭 {title : i18n.tr ( "+ Questions") 페이지 {id : pageAdd 열 {anchors.top : pageAdd.top anchors.topMargin : 50 간격 : 15 너비 : parent.width 높이 : parent.height-50 레이블 {id : 질문 텍스트 : "데이터베이스에 질문 추가 :"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} Row {spacing : 15 anchors.horizontalCenter : parent.horizontalCenter TextField {placeholderText : "Response 1"width : 300 ,,,,,,,,, 무,,,,,,,,,,,,,,,,.} Switch {checked : false}} Row {spacing : 15 anchors.horizontalCenter : parent.horizontalCenter TextField {placeholderText : "Response 2"width : 300} Switch {checked : false}} Row {spacing : 15 anchors.horizontalCenter : parent. horizontalCenter TextField {placeholderText : "Response 3"너비 : 300} Switch {checked : false}} Row {spacing : 15 anchors.horizontalCenter : parent.horizontalCenter TextField {placeholderText : "Response 4"width : 300} Switch {선택됨 : false}} 버튼 {text : "Add +"anchors.horizontalCenter : parent.horizontalCenter width : parent.width-20}}}}
이미 알고있는 코드에 대해 의문이있는 경우 주석

어떻게 보이는지 보자 :

2014-07-24 16:54:37 캡처

이제 스위치를 테스트하면 모든 스위치를 올바른 질문으로 표시 할 수 있으며 당연히 하나만 표시 할 수 있으므로 다음을 수행합니다. 각 스위치에 식별자를 제공 할 수 있습니다 (저장할 내용을 가져와야하므로 텍스트 필드에도) 데이터베이스) 귀하의 답변에 따라 클릭하면 다른 모든 항목이 선택됨 = 거짓 모드로 전환됩니다.

             행 {spacing : 15 anchors.horizontalCenter : parent.horizontalCenter TextField {id : res1 placeholderText : "Response 1"width : 300} Switch {id : sw1 selected : false onClicked : {if (sw1.checked == true) {sw2. 확인 됨 = 거짓 sw3.checked = 거짓 sw4.checked = 거짓}}}}

지금 시도해 보면 어떻게 하나만 표시 할 수 있는지 알게 될 것입니다.


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

4 코멘트, 당신의 것을 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   vr_rv

    아주 훌륭하고 잘 설명 된 기사.
    그건 그렇고, Ubuntu 용 QML로 개발하는 방법을 배우기 위해 스페인어로 된 일부 책, YouTube 채널 또는 블로그를 추천합니까?

    1.    Lolbimbo

      글쎄요, 스페인어로 유튜브 나 이상한 블로그에 몇 가지 튜토리얼이 있지만 사실은 자료가 거의 없다는 것입니다.

      마지막 심비안 인 경우 노키아를 통해 연결하고 QML로 응용 프로그램을 만들 수도 있습니다. 실제로 이것이 제가 배운 방법입니다. 여기 노키아 개발 웹 사이트가 있습니다. http://developer.nokia.com/ (튜토리얼, 전체 프로젝트가 있습니다 ...)

  2.   네스터

    훌륭한 포스트 시리즈, 입력 해 주셔서 감사합니다.

  3.   마르티

    튜토리얼 주셔서 감사합니다.
    그러나 질문과 답변이 데이터베이스에 추가되는 방식을 이해하지 못합니다.
    추가 버튼으로.
    모든 주셔서 감사합니다.