qml教程-3-锚点anchor布局

import QtQuick 2.15

Window {
    width: 400
    height: 600
    visible: true

    Rectangle {
      anchors.fill: parent
      color: 'yellowgreen'
    }
}

import QtQuick 2.15

Window {
    width: 300
    height: 500
    visible: true

//    Rectangle {
//      anchors.fill: parent
//      color: 'yellowgreen'
//    }

    Rectangle {
     id: rect1
     width: 100
     height: 50
     color: 'pink'
    }

    Rectangle {
     id: rect2
     width: 100
     height: 50
     color: 'green'
     anchors.left: rect1.right
    }
}

import QtQuick 2.15

Window {
    width: 300
    height: 500
    visible: true

//    Rectangle {
//      anchors.fill: parent
//      color: 'yellowgreen'
//    }

    Rectangle {
     id: rect1
     width: 100
     height: 50
     color: 'pink'
    }

    Rectangle {
     id: rect2
     width: 100
     height: 50
     color: 'green'
     anchors.left: rect1.right
     anchors.leftMargin: 20
    }

    Rectangle {
     id: rect3
     width: 100
     height: 50
     color: 'green'
     anchors.top: rect1.bottom
     anchors.topMargin: 20
    }
}

import QtQuick 2.15

Window {
    width: 300
    height: 500
    visible: true

    Rectangle {
     id: rect1
     width: 100
     height: 50
     color: 'pink'
    }

    Rectangle {
     id: rect2
     width: 100
     height: 50
     color: 'green'
     anchors.left: rect1.right
     anchors.leftMargin: 20
    }

    Rectangle {
     id: rect3
     width: 100
     height: 50
     color: 'green'
     anchors.top: rect1.bottom
     anchors.topMargin: 20
    }

    Rectangle {
     id: rect4
     width: 100
     height: 50
     color: 'blue'
     anchors.centerIn: parent
    }

}

import QtQuick 2.15

Window {
    width: 300
    height: 500
    visible: true

    Rectangle {
     id: rect1
     width: 100
     height: 50
     color: 'pink'
    }

    Rectangle {
     id: rect2
     width: 100
     height: 50
     color: 'green'
     anchors.left: rect1.right
     anchors.leftMargin: 20
    }

    Rectangle {
     id: rect3
     width: 100
     height: 50
     color: 'green'
     anchors.top: rect1.bottom
     anchors.topMargin: 20
    }

    Rectangle {
     id: rect4
     width: 100
     height: 50
     color: 'blue'
     anchors.centerIn: parent

     rotation: 20
    }

}

import QtQuick 2.15

Window {
    width: 300
    height: 500
    visible: true

    Rectangle {
     id: rect1
     width: 100
     height: 50
     color: 'pink'
    }

    Rectangle {
     id: rect2
     width: 100
     height: 50
     color: 'green'
     anchors.left: rect1.right
     anchors.leftMargin: 20
    }

    Rectangle {
     id: rect3
     width: 100
     height: 50
     color: 'green'
     anchors.top: rect1.bottom
     anchors.topMargin: 20
    }

    Rectangle {
     id: rect4
     width: 100
     height: 50
     color: 'blue'
     anchors.centerIn: parent

//     rotation: 20
//     antialiasing: true
     border.width: 10
     border.color: black
    }

}