한국어
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
        }
    }
}

 

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 85355
176 가상키보드(Qt Virtual Keyboard)를 사용하는 방법 [32] file makersweb 2019.05.03 219969
175 콘솔에서 사용자 입력받기 file makersweb 2020.03.22 51791
174 QString 문자열 다루기 예제 운영자 2019.01.26 39606
173 Windows에서 Qt 설치 따라하기 file makersweb 2019.10.14 30791
172 Qt의 시그널 슬롯 시스템 file makersweb 2015.10.20 23433
171 QThread 소개 및 예제 makersweb 2019.12.25 19232
170 QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) [1] file makersweb 2019.05.26 14771
169 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World file makersweb 2018.03.16 14359
168 Qt 프로그래밍의 시작 makersweb 2015.10.25 14326
167 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 13829
166 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 13325
165 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [20] file makersweb 2018.02.23 12719
164 Qt의 오픈소스 라이센스 소개 file makersweb 2019.12.15 12382
163 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 11978
162 QtSerialPort를 사용한 시리얼(Serial)통신 [3] makersweb 2019.05.21 11758
161 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 11601
160 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 11168
159 Ubuntu Linux에서 Qt Creator 설치 file makersweb 2016.03.06 10647
158 Qt의 스레드간 시그널 슬롯의 커넥션타입 [1] makersweb 2015.10.24 10105
157 QML 강좌 - 동적 Listing (ListView) file makersweb 2019.06.01 10029