QML学习三：锚布局

若该文为原创文章，转载请注明原文出处

使用QML布局时除了使用属性x,y,z方式来确定位置外，还可以使用anchors制定一个元素与其他元素的关系来确定元素在界面中的位置.

一、布局相对位置的确定

1、相对位置确定方法

属性x,y为相对的坐标坐置，原点为布局的左上角，x坐标方向向右增加，y坐标方向向下增加，如下图：

2、 例子

在坐标（50，50）的位置布局一个100*100的矩形，就可以通过x,y直接指定位置，代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
 
Window {
    visible: true
    width: 640
    height: 320
    title: qsTr("Hello World")
 

    Rectangle { 
        x: 50
        y: 50
        width: 100; 
        height: 100; 
        color: "green"
        } 
     
    
}

二、锚布局

 1、解释说明

    在每个Item中，都可以认为有7条不可见的锚线：左（left)、水平中心(horizontalCenter)、上(top）、下(bottom)、右(right)、垂直中心(verticalCenter)、基线(baseline)。

 使用anchors布局时，除了对齐锚线，还可以指定上（topMargin)、下（bottomMargin)、左(leftMargin)、右（rightMargin）四个边的留白。

 2、例子

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 50
        anchors.topMargin: 50

        width: 100
        height: 100
        color: "red"
    }
}

结果

 

两个例子显示的结果是相同的，相同应用在项目中使用更多的是anchors.

三、总结

当改变运行框的大小，相对布局位置不会变。

如有侵权，请及时联系博主删除，VX：18750903063