한국어
Qt
 

QML and Qt Quick QML 코딩 규칙

makersweb 2021.09.05 15:49 조회 수 : 3201

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 85646
158 Qt 6.4에 추가될 Qt Quick 3D Physics file makersweb 2022.08.07 337
157 HTTPS URL을 연결할 때 SslHandshakeFailedError 오류 makersweb 2022.07.31 345
156 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 696
155 Qt로 작성된 iOS 앱에서 시리얼 통신 file makersweb 2022.04.30 831
154 VirtualKeyboard 스타일 커스터 마이징 makersweb 2022.03.13 455
153 성능 고려 및 제안 사항 makersweb 2022.03.07 497
152 Binding 타입으로 객체 속성 간 묶기 makersweb 2022.03.04 409
151 Qt Bluetooth Low Energy 개요 makersweb 2022.02.13 656
150 Qt Android 앱에 AdMob 배너달기 file makersweb 2021.12.04 386
149 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 849
148 QML에서 앵커(anchors)로 위치 지정 file makersweb 2021.10.05 3747
147 안드로이드용 Qt 6.2 makersweb 2021.10.02 499
146 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 666
145 QML에서 Websocket 서버와 통신 file makersweb 2021.09.18 816
» QML 코딩 규칙 makersweb 2021.09.05 3201
143 QML 에서 QR코드 생성 file makersweb 2021.08.20 887
142 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 491
141 Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 874
140 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 743
139 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 556