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

            }
        }
    }
}

 

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 74
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++)으로 테스트 file makersweb 2019.01.20 9
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 3
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 5
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 8
» Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 23
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 28
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 40
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 43
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 12
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 40
36 Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 46
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 116
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 51
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 110
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 148
31 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 192
30 소스코드에서 환경변수 가져오기와 설정하기 makersweb 2018.10.08 74
29 표를 만들고 PDF문서로 출력하기 file makersweb 2018.09.30 90
28 Qml에서 키보드 입력 이벤트 핸들링 file makersweb 2018.08.09 194