锚布局
锚布局有7种锚线
- anchors.left
- anchors.right
- anchors.top
- anchors.bottom
- anchors.horizontalCenter
- anchors.verticalCenter
- anchors.baseline
5种锚边距
- anchors.leftMargin
- anchors.rightMargin
- anchors.topMargin
- anchors.bottomMargin
- anchors.margins
3种锚偏移
- anchors.horizontalCenterOffset
- anchors.verticalCenterOffset
- anchors.baselineOffset
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle {id: graycolor: "gray"anchors.fill: parent // 灰色矩形充满整个界面}Rectangle {id: greenwidth: 100height: 100color: "green"anchors.centerIn: parent // 绿色矩形在界面正中间}Rectangle {id: bluewidth: 100height: 100color: "blue"anchors.verticalCenter: green.verticalCenter // 蓝色矩形的中心Y坐标和绿色矩形的中心Y坐标一样anchors.left: green.right // 蓝色矩形的左边和绿色矩形的右边对齐anchors.leftMargin: 10 // 蓝色矩形的左边和绿色矩形间距10像素}Rectangle {id: redwidth: 50height: 50color: "red"anchors.horizontalCenter : blue.horizontalCenter // 红色矩形的中心X坐标和蓝色矩形的中心X坐标一样anchors.horizontalCenterOffset : 15 // 红色矩形在水平方向将中心点偏移15像素anchors.top: blue.bottom // 红色矩形的顶坐标和蓝色矩形的底坐标一样}Rectangle {id: blackwidth: 100height: 100color: "black"anchors.right: red.left // 黑色矩形的右边和红色矩形的左边对齐anchors.verticalCenterOffset: 100 // 黑色矩形在垂直方向将中心点偏移100像素(没有设置垂直中心坐标，所以无效)//anchors.verticalCenter: parent.top // 测试设置了垂直中心坐标后的效果}Button{id:btn1width: 80height: 25anchors.verticalCenter: black.verticalCenter//anchors.horizontalCenter: rect4.horizontalCentertext: ""anchors.margins: 20 // 按钮四边均设置20像素边距}Text {text: "Hello World!"//anchors.bottom: btn1.bottomanchors.centerIn : btn1}
}
效果图
