Estilo de codificação Qt e QML

Qt/c++

Nomeamento do sinal e do espaço

Os sinais e slots devem usar camelCase. Um sinal deve usar o simples participante passado ou passado de algum verbo, provavelmente prefixado por um assunto curto. Um slot correspondente deve ser o sinal prefixado com a palavra “on” e não a palavra “slot”. Aqui estão alguns exemplos:

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

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

---

QML

Formatação de código

A versão Qt 5.15.0 do qmlformat tem alguns problemas em relação às seções de comentários e atualmente não discrimina as colunas max, então continuaremos a formatar usando essas diretrizes por agora. A seguir, um componente de amostra abrangente, adaptado a partir de https://doc.qt.io/qt-5/qml-codingconventions.html, que tenta ilustrar o componente idealmente formateado.

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