QtとQMLコードスタイル

Qt/c++

信号とスロットの命名

信号とスロットの両方が camelCaseを使用する必要があります. 信号は,短文字で先付されるような,ある動詞の単純な過去文字または過去 participle を使用する必要があります.対応するスロットは"オン"という単語で先付される信号であって,スロットという単語ではなくなければなりません.以下はいくつかの例です.

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

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

---

QML

コードフォーマット

Qt 5.15.0バージョンの qmlformat はコメントセクションに関するいくつかの問題があり,現在では最大列に差別をしていないため,今のところこれらのガイドラインを使用してフォーマットし続けます.以下は,理想的にフォーマットされたコンポーネントを図解しようとする https://doc.qt.io/qt-5/qml-codingconventions.html から適応された包括的なサンプルコンポーネントです.

/*
 * 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
        }
    }
}