一、概念
anchors是 Item 的基本属性。可以被所有的可视化QML元素使用。
一个元素有6条锚定线:
- top
- bottom
- left
- right
- horizontalCenter
- verticalCenter
在文本元素 Text 中有一条文本的锚定基线(baseline) 。
每一条锚定线都有一个 offset 值,top、bottom、left、right 的锚定线中的它被称作边距。对于 horizontalCenter、verticalCenter、baseline被称作偏移值。
二、示例
BlueSquare.qml
import QtQuick 2.0
Rectangle
{
width: 12
color:"#0000FF"
property alias text: centertxt.text
Drag.active: dragArea.drag.active;//开启拖拽
Text
{
id:centertxt
font.pixelSize:20
anchors.centerIn: parent
color: "#000000"
}
MouseArea
{
id: dragArea;
anchors.fill: parent;
drag.target: parent;
}
}
Rectangle
{
width: 200
height: 120
color:"#005536"
BlueSquare
{
anchors.fill: parent
anchors.margins: 8
text: "元素填充它的父元素"
}
}
即使中心的子项开启了拖拽实际上也无法拖拽,因为拖拽实际上是改变项目的x、y值,这里设置了锚填充父项,即它的每条边都被固定了。
Rectangle
{
width: 200
height: 120
color:"#005536"
BlueSquare
{
width: 100
height: 100//这种情况要设置宽高才会显示
anchors.left: parent.left
anchors.leftMargin: 8
text: "元素左对齐它的父元素"
color:"#0000FF"
}
}
这个子项可以上下拖拽,因为它只固定了左边。
Rectangle
{
width: 200
height: 120
color:"#005536"
BlueSquare
{
width: 100
height: 100//这种情况要设置宽高才会显示
anchors.left: parent.right
// anchors.leftMargin: 8
text: "元素的左边与它父元素的右边对齐"
color:"#0000FF"
}
}
Rectangle
{
width: 200
height: 120
BlueSquare
{
id:fense
width: 100
height: 100
anchors.horizontalCenter: parent.horizontalCenter
text: "粉色"
color:"#FF00FF"
}
BlueSquare
{
width: 100
height: 100
anchors.top: fense.bottom
anchors.topMargin: 4
anchors.horizontalCenter: fense.horizontalCenter
text: "元素中间对齐"
color:"#44AA55"
}
}
这里可以拖拽粉色项但不能拖拽绿色项,因为设置了绿色项顶部依赖于粉色项的底部。
Rectangle
{
width: 200
height: 120
color:"#005536"
BlueSquare
{
width: 100
height: 100
anchors.centerIn: parent
text: "元素在它的父元素中居中"
color:"#FF00FF"
}
}
Rectangle
{
width: 200
height: 120
color:"#005536"
BlueSquare
{
width: 100
height: 100
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: -20
anchors.verticalCenter: parent.verticalCenter
text: "元素水平方向居中对齐父元素并向左偏移20像素,垂直方向居中对齐"
color:"#FF00FF"
}
}