关于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'
}
}
锚点布局设置外边距时,必须要先设置对应的锚点,比如你设置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'
}
}
当你设置了锚点的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'
}
}
锚点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'
}
}
锚点于父节点垂直居中 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'
}
}
}
锚点于父节点水平居中 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'
}
}
}
同时设置垂直和水平居中,就能达到父节点居中的效果这里就不上代码演示了,基本锚点常用和注意的地方就这么多。