Qt 및 QML 코딩 스타일은

Qt/C++

신호 및 슬롯 이름

신호와 슬롯 모두 camelCase를 사용해야 한다. 신호는 어떤 동사의 단순한 과거 시간 또는 과거 입자를 사용해야 하며, 아마도 짧은 주제가 앞면으로 붙여진 것이다. 그에 대응하는 슬롯은 “on”라는 단어와 앞면으로 붙여진 신호가어야 하며, “slot”라는 단어가 아닌 것이다. 다음과 같은 몇 가지 예는 다음과 같다:

// correct
signal:
    void shutdownScheduled();
    void navigationRequested();
...
slot:
    void onShutdownScheduled();
    void onNavigationRequested();

// incorrect
signal:
    void shutdown();
    void navigateToHomeView();
...
slot:
    void onShutdown();
    void slotNavigateToHomeView();

QML

코드 포맷

The Qt 5.15.0 version of qmlformat has some issues dealing with comment sections and currently does not discriminate against max columns, so this formatting style will continue to be used in the guidelines. The following is a comprehensive sample component, adapted from https://doc.qt.io/qt-5/qml-codingconventions.html, that attempts to illustrate the ideally formatted component.

/*
 * authored by/copyright …
 */

// Id always on the first line, and always present and called root
// for root component. Only present if referenced for children.
// Multi-line comments use '//'.
// There should always be a brief description of a component.
// Multi-line comments start with a capital letter and end with
// a period.
Rectangle {
    id: root

    // property declarations
    property bool thumbnail: false
    property alias image: photoImage.source

    // signal declarations
    signal clicked

    // javascript functions
    function doSomething(x) {
        return x + photoImage.width
    }

    // object properties
    color: "gray"
    // try to group related properties together
    x: 20
    y: 20
    height: 150
    // large bindings
    width: {
        // Always space all operators, and add a single space
        // before opening brackets.
        if (photoImage.width > 200) {
            photoImage.width
        } else {
            height
        }
    }

    // child objects (contentItem, defaults, etc. first)
    Rectangle {
        id: border
        anchors.centerIn: parent
        color: "white"

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

    Text {
        anchors.centerIn: photoImage
        // Use the ellipsis character (…) for manual ellision within
        // UI text and don't translate untranslatables.
        text: qsTr("an emoji: %1 and a number: %2 …").arg("💡").arg(42)
    }

    // states
    states: State {
        name: "selected"
        PropertyChanges {
            target: border
            color: "red"
        }
    }

    // transitions
    transitions: Transition {
        from: ""
        to: "selected"
        ColorAnimation {
            target: border
            duration: 200
        }
    }
}

JS code formatting

Please configure the IDE to format using the clang-format file in src/app/js/. Ideally, any JS code should be located in that directory, and the clang-format file should be used to format the code. JS files that serve as utilities or are not part of the main application should all be located in the src/app/js/ directory. If for some reason a JS code file must be included elsewhere, please copy the clang-format file to that directory and use it to format the code.