Estilo de codificación Qt y QML

Qt/C++

Nombramiento de la señal y la ranura

Una señal debe usar el pasado simple o participio pasado de algún verbo, probablemente prefijado por un sujeto corto.

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

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

CML

Formatear código

La versión Qt 5.15.0 de qmlformat tiene algunos problemas relacionados con las secciones de comentarios y actualmente no discrimina las columnas máximas, por lo que este estilo de formato continuará usándose en las pautas. El siguiente es un componente de muestra completo, adaptado de https://doc.qt.io/qt-5/qml-codingconventions.html, que intenta ilustrar el componente formateado idealmente.

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

Formateo de código JS

Configure el IDE para formatearlo utilizando el archivo de formato clang en “ src/app/js/. Idealmente, cualquier código JS debería ubicarse en ese directorio, y el archivo de formato clang debería usarse para formatear el código. Los archivos JS que sirven como utilidades o que no forman parte de la aplicación principal deben ubicarse en el directorio src/app/js/”. Si por alguna razón un archivo de código JS debe incluirse en otro lugar, copie el archivo con formato clang en ese directorio y utilícelo para formatear el código.