한국어
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 2020
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 284
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 153
48 QString 문자열 다루기 예제 운영자 2019.01.26 1008
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 file 운영자 2019.01.23 184
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 file makersweb 2019.01.20 427
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 100
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 199
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 68
» Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 420
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 622
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 127
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 1078
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 134
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 191
36 Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 138
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 855
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 190
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 314
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 441