QML coding specification

Catalog

QML Object declaration

Attribute group

list

JavaScript Code

---

QML Object declaration

QML Object properties are generally constructed in the following order ：

• id
• Property declaration
• Signal declaration
• JavaScript function
• Object properties
• Sub object
• state
• State switching

For better readability , It is recommended to add a blank line between different parts . for example , Let's use a Photo Object as an example ：

Rectangle {
    id: photo //  id On the first line , Easy to find an object  

    property bool thumbnail: false // Property declaration 
    property alias image: photoImage.source

    signal clicked //  Signal declaration 

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

    color: "gray" //  Object properties 
    x: 20; y: 20; height: 150 //  Put related attributes together 
    width: { //  binding 
        if (photoImage.width > 200) {
            photoImage.width;
        } else {
            200;
        }
    }

    Rectangle { //  Sub object 
        id: border
        anchors.centerIn: parent; color: "white"

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

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

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

Attribute group

If you use more than one of a set of attributes , Then use group notation , Instead of using point notation , This can improve readability . for example ：

Rectangle {
    anchors.left: parent.left; anchors.top: parent.top; 
    anchors.right: parent.right; anchors.leftMargin: 20
}

Text {
    text: "hello"
    font.bold: true; font.italic: true; font.pixelSize: 20; 
    font.capitalization: Font.AllUppercase
}

It can be written like this ：

Rectangle {
    anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
}

Text {
    text: "hello"
    font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
}

list

If a list contains only one element , So we usually ignore square brackets . For example, the following code ：

states: [
    State {
        name: "open"
        PropertyChanges { target: container; width: 200 }
    }
]

It can be written. ：

states: State {
    name: "open"
    PropertyChanges { target: container; width: 200 }
}

JavaScript Code

If the script is a separate expression , Recommended direct use ：

Rectangle { color: "blue"; width: parent.width / 3 }

If the script has only a few lines , Then it is suggested to write it in a piece ：

Rectangle {
    color: "blue"
    width: {
        var w = parent.width / 3
        console.debug(w)
        return w
    }
}

If the script has many lines , Or need to be used by different objects , Then it is recommended to create a function , Then call it like this ：

function calculateWidth(object)
{
    var w = object.width / 3
    // ...
    // more javascript code
    // ...
    console.debug(w)
    return w
}

Rectangle { color: "blue"; width: calculateWidth(parent) }

If it's a long script , We can put this function in a separate JavaScript In file , Then import it like this ：

import "myscript.js" as Script

Rectangle { color: "blue"; width: Script.calculateWidth(parent) }

If the code exceeds one line , So in the block , We use semicolons to indicate the end of each statement ：

MouseArea {
    anchors.fill: parent
    onClicked: {
        var scenePos = mapToItem(null, mouseX, mouseY);
        console.log("MouseArea was clicked at scene pos " + scenePos);
    }
}