qml 2.8 布局练习

GreenSquare.qml?

import QtQuick

Rectangle {
    width: 100
    height: 100
    color: 'green'
    border.color: Qt.lighter(color)
}

BlueSquare.qml?

import QtQuick

Rectangle {
    color: 'blue'
    width: 50
    height: 50
    border.color: Qt.lighter(color)

    property alias text: label.text //将text开放出去

    Text {
        id: label
        text: ''
        color: 'white'
        anchors.centerIn: parent
    }
}

04.qml?

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Layout")

    // (1)
    GreenSquare {
        BlueSquare {
            text: '(1)'

            anchors.fill: parent
            anchors.margins: 8 //内边距为8px，和上面的填充一起写才能生效
        }
    }

    // (2)
    GreenSquare {
        x: 110

        BlueSquare {
            text: '(2)'

            anchors.left: parent.left
            anchors.margins: 8
            y: 8
        }
    }

    // (3)
    GreenSquare {
        x: 220

        BlueSquare {
            id: b1
            text: '(3)'
            anchors.horizontalCenter: parent.horizontalCenter //水平居中
            height: 25 //原尺寸的一半
            y: 10
        }

        BlueSquare {
            text: '(3-1)'
            anchors.top: b1.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            height: 25
            width: 75
            anchors.margins: 8
        }
    }

    // (4)
    GreenSquare {
        x: 330

        BlueSquare {
            text: '(04)'
            anchors.centerIn: parent
        }
    }

    // (5)
    GreenSquare {
        x: 440

        BlueSquare {
            text: '(5)'
            anchors.centerIn: parent
            anchors.horizontalCenterOffset: -12 //往左偏移12px
        }
    }
}