qml positioning

Insert picture description here

BlueSquare.qml

import QtQuick 2.0

Item {
    id:root
    width: 48
    height: 48
    property alias text: label.text
    Rectangle{
        width: parent.width
        height: parent.height
        color: "#87CEFA"
        Text {
            anchors.centerIn: parent
            id: label
            text: qsTr("text")
            font.pixelSize: 20
        }
        border.color: Qt.lighter(color)
    }
}

GreenSquare.qml

import QtQuick 2.0

Item {
    id:root
    width: 100
    height: 100
    Rectangle{
        width: parent.width
        height: parent.height
        color: "#00CD00"
        border.color: Qt.lighter(color)
    }
}

layout.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 240
    color: "#000000"
    Grid{
        columns: 3
        anchors.fill: parent
        anchors.margins: 10
        spacing: 8
        GreenSquare{
            BlueSquare{
                width: 12
                anchors.fill: parent
                anchors.margins: 8
                text:"1"
            }
        }
        GreenSquare{
            BlueSquare{
                y:8
                anchors.left: parent.left
                anchors.leftMargin: 8
                text:"2"
            }
        }
        GreenSquare{
            BlueSquare{
                y:8
                anchors.left: parent.right
                text:"3"
            }
        }
        GreenSquare{
            BlueSquare{
                id: blue1
                height: 24
                y:18
                anchors.horizontalCenter: parent.horizontalCenter
                text: "4"
            }
            BlueSquare{
                id: blue2
                width: 72
                height: 24
                anchors.top: blue1.bottom
                anchors.topMargin: 4
                anchors.horizontalCenter: blue1.horizontalCenter
                text: "5"
            }
        }
        GreenSquare{
            BlueSquare{
                anchors.centerIn: parent
                text: "6"
            }
        }
        GreenSquare{
            BlueSquare{
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: -12
                anchors.verticalCenter: parent.verticalCenter
                text: "7"
            }
        }
    }
}

Source code: https://github.com/sunlianqi/qml/tree/master/layout

Guess you like