Qml anchors锚点布局_qml rectangle anchors

关于qml的锚点布局的一些分享，并不能算是教学之类的。

锚点布局会自动设置宽度高度，并且优先级比 width height更高

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQml 2.13

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

    Rectangle {
        anchors.fill: parent
        width: 100
        height: 100
        color: 'red'
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

锚点布局设置外边距时，必须要先设置对应的锚点，比如你设置leftMarigin间距时，必须先设置anchros.left

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQml 2.13

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

    Rectangle {
        anchors.left: parent.left
        anchors.leftMargin: 50
        width: 100
        height: 100
        color: 'red'
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当你设置了锚点的left、right左右两边时，择会拥有宽度，并且width将无效化

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQml 2.13

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

    Rectangle {
        anchors.left: parent.left
        anchors.leftMargin: 50
        anchors.right: parent.right
        anchors.rightMargin: 50
        width: 100
        height: 100
        color: 'red'
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

锚点top、 botton 与lef、right同理，只不过一个是左右宽度，一个是山下高度这里就不放代码演示了

锚点对于父节点居中

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQml 2.13

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

    Rectangle {
        anchors.centerIn: parent
        width: 100
        height: 100
        color: 'red'
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

锚点于父节点垂直居中 ps: 窗口是没有vericalCent属性的

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQml 2.13

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

    Item {
        anchors.fill: parent

        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            width: 100
            height: 100
            color: 'red'
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

锚点于父节点水平居中 ps: 窗口是没有vericalCent属性的

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQml 2.13

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

    Item {
        anchors.fill: parent

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            width: 100
            height: 100
            color: 'red'
        }
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

同时设置垂直和水平居中，就能达到父节点居中的效果这里就不上代码演示了，基本锚点常用和注意的地方就这么多。
1