한국어
Qt
 

QML and Qt Quick QML 코딩 규칙

makersweb 2021.09.05 15:49 조회 수 : 1005

QML 프로그래밍을 하는 사람들에게 권장하는 QML 코딩 규칙 몇 가지를 소개한다. 이번 포스트는 공식 문서 "QML Coding Conventions" 를 가져온 것이다.

QML 객체 선언

문서와 예제 전체에서 QML 객체 속성은 항상 다음 순서로 구성된다.

id
property declarations
signal declarations
JavaScript functions
object properties
child objects

더 나은 가독성을 위해 각기 다른 부분을 빈 줄로 구분한다. 예를 들어 가상의 사진 QML 객체는 다음과 같다.

Rectangle {
    id: photo                                               // 첫 번째 줄에서 id를 사용하면 개체를 쉽게 식별할 수 있다.

    property bool thumbnail: false                          // 사용자 정의 프로퍼티(속성) 선언.
    property alias image: photoImage.source

    signal clicked                                          // 사용자 정의 시그널 선언

    function doSomething(x){                                // 자바스크립트 함수
        return x + photoImage.width
    }

    color: "gray"                                           // 객체 자체 프로퍼티(속성)
    x: 20                                                   // 관련 속성을 함께 그룹화
    y: 20
    height: 150
    width: {                                                // 바인딩
        if (photoImage.width > 200) {
            photoImage.width;
        } else {
            200;
        }
    }

    states: [
        State {
            name: "selected"
            PropertyChanges { target: border; color: "red" }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "selected"
            ColorAnimation { target: border; duration: 200 }
        }
    ]

    Rectangle {                                             // child 객체들 배치
        id: border
        anchors.centerIn: parent; color: "white"

        Image {
            id: photoImage
            anchors.centerIn: parent
        }
    }
}

그룹화

속성 그룹에서 여러 속성을 사용하는 경우 점 표기법 대신 그룹 표기법을 사용하는 것이 가독성 향상에 더 도움이 된다.

예를 들어 다음과 같이 점 표기법을 사용 했던 것을

Rectangle {
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.leftMargin: 20
}

다음과 같이 표현 할 수 있다.

Rectangle {
    anchors {
        left: parent.left
        top: parent.top
        right: parent.right
        leftMargin: 20
    }
}

명시적 액세스

가독성과 성능을 향상시키기 위해 상위 구성 요소의 속성을 ID로 명시적으로 참조한다.

Item {
    id: root

    property int rectangleWidth: 50

    Rectangle {
        width: root.rectangleWidth
    }
}

필수 속성

구성 요소 외부에 정의된 데이터가 필요한 경우 필수 속성을 사용하여 이를 명시적으로 지정한다. 이름에서 알 수 있듯이 객체의 인스턴스가 생성될 때 필수 속성을 설정해야 한다. 이 규칙을 위반하면 정적으로 감지될 수 있는 경우 QML 응용 프로그램이 시작되지 않는다.

// ColorRectangle.qml
Rectangle {
    required color
}

Signal handlers

신호 처리기에서 매개변수를 처리할 때 명시적으로 이름을 지정하는 함수를 사용한다.

MouseArea {
    onClicked: (event) => { console.log(`${event.x},${event.y}`); }
}

JavaScript Code

스크립트가 단일 표현식인 경우 인라인으로 작성하는 것이 좋다.

Rectangle { color: "blue"; width: parent.width / 3 }

스크립트의 길이가 몇 줄이면 일반적으로 블록을 사용한다.

Rectangle {
    color: "blue"
    width: {
        var w = parent.width / 3
        console.debug(w)
        return w
    }
}

스크립트가 몇 줄보다 길거나 다른 개체에서 사용할 수 있는 경우 함수를 만들고 다음과 같이 호출하는 것이 좋다.

function calculateWidth(object)
{
    var w = object.width / 3
    // ...
    // more javascript code
    // ...
    console.debug(w)
    return w
}

Rectangle { color: "blue"; width: calculateWidth(parent) }
Item { width: calculateWidth(parent); height: width }

긴 스크립트의 경우 함수를 별도의 JavaScript 파일에 넣고 다음과 같이 가져온다.

import "myscript.js" as Script

Rectangle { color: "blue"; width: Script.calculateWidth(parent) }

스크립트에 세미콜론을 사용하여 각 명령문의 끝을 나타낼 수 있다.

MouseArea {
    anchors.fill: parent
    onClicked: {
        var scenePos = mapToItem(null, mouseX, mouseY);
        console.log("MouseArea was clicked at scene pos " + scenePos);
    }
}

 

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 58739
155 Qt로 작성된 iOS 앱에서 시리얼 통신 file makersweb 2022.04.30 52
154 VirtualKeyboard 스타일 커스터 마이징 makersweb 2022.03.13 135
153 성능 고려 및 제안 사항 makersweb 2022.03.07 112
152 Binding 타입으로 객체 속성 간 묶기 makersweb 2022.03.04 66
151 Qt Bluetooth Low Energy 개요 makersweb 2022.02.13 152
150 Qt Android 앱에 AdMob 배너달기 file makersweb 2021.12.04 167
149 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 325
148 QML에서 앵커(anchors)로 위치 지정 file makersweb 2021.10.05 699
147 안드로이드용 Qt 6.2 makersweb 2021.10.02 204
146 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 182
145 QML에서 Websocket 서버와 통신 file makersweb 2021.09.18 223
» QML 코딩 규칙 makersweb 2021.09.05 1005
143 QML 에서 QR코드 생성 file makersweb 2021.08.20 357
142 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 179
141 Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 471
140 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 334
139 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 305
138 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 418
137 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 454
136 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 459