한국어
Qt
 

1강에서는 시각적인 Qml 컴포넌트를 주로 설명했다면 2강에서는 입력과 사용자 정의 컴포넌트를 만드는 방법등을 설명한다.

 

MouseArea

화면에 보이진 않지만 일반 컴포넌트들에 대한 마우스 처리를 제공한다. 마우스 입력에 대한 다양한 이벤트 시그널들이있다. 아래의 예제외에도 entered, exited, positionChanged, doubleClicked, wheel 등이 있다.

MouseArea{
    width: 100
    height: 100
    onPressed: {
        console.log("Pressed")
        // Do Something.
    }
    onReleased: {
        console.log("Released")
        // Do Something.
    }
    onClicked:{
        console.log("clicked")
        // Do Something.
    }
    onPressedChanged: {
        console.log("Changed")
        // Do Something.
    }
}

 

1강에서 사용했던 예제 소스코드에 MouseArea를 배치하였다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello Makersweb")

    Rectangle{
        width: 200
        height: 100
        anchors.centerIn: parent
        color: isOn ? "green" : "yellow"
        border.width: 2
        border.color: "black"

        property bool isOn: false // state flag로 사용될 사용자정의 프로퍼티

        Text {
            id: title
            anchors.fill: parent
            text: parent.isOn? qsTr("On") : qsTr("Off") // state flag에 따라 text를 설정하는 삼항연산자
            font.pixelSize: 20
            font.bold: true
            color: parent.isOn? "yellow" : "green"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        MouseArea{
            anchors.fill: parent             // Rectangle의 영역을 채움
            onPressed: parent.isOn = true    // on설정
            onReleased: parent.isOn = false  // off설정
            onClicked: console.log("clicked")
            onPressedChanged: console.log("state: " + parent.isOn)
        }
    }
}

 

아주쉽게 간단한 버튼을 만들었다.

jwplayer

 

사용자 정의 컴포넌트

위에서 간단히 만든 버튼을 다른 여러곳에서 재사용 할 수 있도록 컴포넌트로 만들어보자.

Button.qml이라는 새로운 qml파일을 만들고 위에 구현한 내용을 채운다. 파일이름은 영문, 대문자로 시작해야한다.

/*
* Comment: Button.qml
*/

import QtQuick 2.11

Rectangle{
    width: 200
    height: 100
    anchors.centerIn: parent
    color: isOn ? "green" : "yellow"
    border.width: 2
    border.color: "black"

    property bool isOn: false // state flag로 사용될 사용자정의 프로퍼티

    Text {
        id: title
        anchors.fill: parent
        text: parent.isOn? qsTr("On") : qsTr("Off") // state flag에 따라 text를 설정하는 삼항연산자
        font.pixelSize: 20
        font.bold: true
        color: parent.isOn? "yellow" : "green"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    MouseArea{
        anchors.fill: parent             // Rectangle의 영역을 채움
        onPressed: parent.isOn = true    // on설정
        onReleased: parent.isOn = false  // off설정
        onClicked: console.log("clicked")
        onPressedChanged: console.log("state: " + parent.isOn)
    }
}

 

다른 qml에서 Button컴포넌트를 사용한다.

import QtQuick 2.11
import QtQuick.Window 2.11
import "." // 다른 컴포넌트를 참조할 수 있는 경로. 이 qml과 같은 경로에 있다면 생략 할 수 있다.

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello Makersweb")

    // 새롭게 정의한 버튼
    Button{
        id: newButton

        onIsOnChanged: {
            // Javascript Syntax
            if(isOn){
                // Do Something.
            }else{

            }
        }
    }
}

 

시그널, 함수정의

이번엔 위에서 만든 버튼을 조금 변경하여 토글로 동작하는 버튼으로 바꿔보려한다.

위에서 만든 버튼은 클릭했을때 isOn 플로퍼티를 바로 바꾸고 있지만 이번엔 버튼에 새로운 시그널을 정의하고 그 시그널이 발생했을때 어떤 동작을 수행하며 그 동작이 성공적으로 됬을 때 isOn 프로퍼티를 변경하는 것이다.

import QtQuick 2.11

Rectangle{
    width: 200
    height: 100
    anchors.centerIn: parent
    color: isOn ? "green" : "yellow"
    border.width: 2
    border.color: "black"

    property bool isOn: false // state flag로 사용될 사용자정의 프로퍼티

    // 시그널 정의
    signal buttonPressed(bool isPressed)
    signal buttonReleased(bool isPressed)
    signal buttonClicked()

    Text {
        id: title
        anchors.fill: parent
        text: parent.isOn? qsTr("On") : qsTr("Off") // state flag에 따라 text를 설정하는 삼항연산자
        font.pixelSize: 20
        font.bold: true
        color: parent.isOn? "yellow" : "green"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    MouseArea{
        anchors.fill: parent                 // Rectangle의 영역을 채움
        onPressed: buttonPressed(pressed)    // pressed 시그널 발생
        onReleased: buttonReleased(pressed)  // released 시그널 발생
        onClicked: buttonClicked()           // clicked 시그널 발생
    }
}

 

어떤 동작을 수행할 함수를 정의하고 이 결과값에 따라 isOn를 설정한다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello Makersweb")

    property bool flag: false

    Button{
        id: newButton

        // 버튼이 클릭됬을 때 어떤일을 수행할 함수.
        function buttonClickProcess(){
            var state = flag

            flag = !flag

            // 성공적으로 수행 했는지 판단
            if(flag !== state)
                return true
            else
                return false
        }

        // 버튼 클릭 이벤트 핸들러
        onButtonClicked: {
            if(buttonClickProcess())
                isOn = flag
            else
                return
        }
    }
}

 

이 글과 연관된 다른 글
  1. [2019/04/26] QML과 QtQuick 모듈 개념과 기본 타입들 by makersweb (1203)
  2. [2019/01/03] Qml 기본 컴포넌트 강좌 (1) by makersweb (2018)
  3. [2018/12/25] Qml과 C++로 구현하는 GUI어플리케이션 by makersweb (2558)
  4. [2018/04/06] Qml 및 C++개발시 유용한 팁 by makersweb (1699)
  5. [2018/03/16] 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World by makersweb (3102)
번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 5671
58 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 1203
57 QML 전역 객체 (Global Object) file makersweb 2019.04.10 248
56 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 229
55 GPU가 없는 장치에서 Qt Quick을 사용 makersweb 2019.04.02 282
54 QTextCodec클래스를 사용하여 유니코드와 EUC-KR 변환 makersweb 2019.03.25 404
53 qInstallMessageHandler를 이용한 디버그 메세지 출력 제어하기 makersweb 2019.02.25 202
52 Qt5기반 독립 프로세스(out-of-process)로 동작하는 가상키보드(virtual keyboard) file makersweb 2019.02.24 587
51 Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 772
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 599
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 544
48 QString 문자열 다루기 예제 운영자 2019.01.26 4576
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 file 운영자 2019.01.23 691
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 [7] file makersweb 2019.01.20 967
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 489
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 501
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 169
» Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 1743
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 2018
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 465