qml-2 定位

 xyz布局定位

继承体系  Button ->AbstractButton->Control->Item->QQuickItem

介绍：The QQuickItem class provides the most basic of all visual items in Qt Quick

属性：

x : qreal

Defines the item's x position relative to its parent.相对于父类的x

Access functions:

qreal	x() const
void	setX(qreal)

y : qreal       

Defines the item's y position relative to its parent.   相对于父类的y

Access functions:

qreal	y() const
void	setY(qreal)

z : qreal

Sets the stacking order of sibling items. By default the stacking order is 0.

Items with a higher stacking value are drawn on top of siblings with a lower stacking order. Items with the same stacking value are drawn bottom up in the order they appear. Items with a negative stacking value are drawn under their parent's content.

The following example shows the various effects of stacking order.

设置同级项的堆叠顺序。 默认情况下，堆叠顺序为 0。

具有较高堆叠值的项目被绘制在具有较低堆叠顺序的同级之上。 具有相同堆叠值的项目按照它们出现的顺序自下而上绘制。 具有负堆叠值的项目被绘制在其父项的内容下。

以下示例显示了堆叠顺序的各种效果。

属性绑定

        在qml中可以为对象的属性分配一个静态值，该值保持不变，直到为它显式分配一个新值为止。但是，为了充分利用QML及其对动态对象行为的内置支持，大多数QML对象都使用属性绑定。

        属性绑定是QML的一项核心功能，可让开发人员指定不同对象属性之间的关系。当属性的依赖项的值更改时，该属性将根据指定的关系自动更新。

        在后台，QML引擎监视属性的依赖关系（即绑定表达式中的变量）。检测到更改时，QML引擎将重新计算绑定表达式并将新结果应用于属性。

例子：

拖拽btn时候，让Rectangle跟着移动

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0


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

    Button{
        id:btn1
        x:0
        y:0
        text:"click"
        onClicked: {
            rect1.color="red"
        }

        //鼠标区域
        MouseArea{
        anchors.fill: parent
        drag.target: btn1
        }
    }

    Rectangle {
        id:rect1
        color: "blue"
        width: 100
        height: 100
        x: btn1.x
        y: btn1.y + btn1.height

    }
}

 将Rectangle的 坐标 x y 绑定 btn1.x  y ；当btn1的坐标发生变化时，其坐标跟着动态变化

锚点布局

定义在Item中

         锚点提供了一种通过指定项目与其他项目的关系来定位项目的方法。
        边距适用于顶部、底部、左侧、右侧和填充锚点。 anchors.margins 属性可用于一次将所有不同的边距设置为相同的值。 它不会覆盖先前设置的特定边距； 要清除显式边距，请将其值设置为未定义。 请注意，边距是特定于锚点的，如果项目不使用锚点，则不会应用边距。
偏移量适用于水平中心、垂直中心和基线锚点。

    
        要清除锚值，请将其设置为未定义。
        anchors.alignWhenCentered（默认为 true）强制居中的锚点对齐到整个像素； 如果居中的项目具有奇数宽度或高度，则项目将定位在整个像素上，而不是放置在半像素上。 这确保了项目被清晰地绘制。 在某些情况下这是不可取的，例如当旋转项目时，由于中心是圆形的，抖动可能很明显。

anchors.fill

         anchors.fill 为一个 item 与另一个 item (只是qobject即可)具有相同的几何图形提供了一种便捷的方式，相当于连接了所有四个定向锚点。

        如：将Rectangle 区域填充满整个窗口

anchors.right

一种错误的写法：Window并不是继承Item 而是继承QQuickWindow 因此不能这么用。正确写法：

解决Qml的Window控件不能使用id进行布局定位的问题：Window窗口的根Item被附加在contentItem上。如下写法即可：

         

anchors.top 

 demo练习

用

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0


Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")


    Item{
      anchors.fill: parent

      Rectangle{
          id:rect1

          color: 'green'
          width: parent.width/3   //宽度是父类的1/3
          anchors.top:parent.top   //高度与父类 相同
          anchors.bottom: parent.bottom
      }

      Rectangle{
          id:rect2

          color: 'red'
          width: parent.width/3   //宽度是父类的1/3
          anchors.top:parent.top   //高度与父类 相同
          anchors.bottom: parent.bottom
          anchors.left: rect1.right
      }


      Rectangle{
          id:rect3

          color: 'black'
          width: parent.width/3   //宽度是父类的1/3
          anchors.top:parent.top   //高度与父类 相同
          anchors.bottom: parent.bottom
          anchors.left: rect2.right        //在rect2 的右边
      }

    }


}

 布局

行列布局

 Flow

        Flow 项目将其子项目定位为页面上的单词，包装它们以创建项目的行或列。

        如果 Flow 中的某个 item 不可见，或者它的宽度或高度为 0，则该 item 将不会被布局并且在 Flow 中将不可见。 此外，由于 Flow 会自动定位其子项，因此 Flow 中的子项不应设置其 x 或 y 位置或使用任何锚属性锚定自身。

 注意：通常需要设置Flow的宽度高度来实现item的换行，比如这里使用了锚点；如果不设置，会超出窗口外面

网格布局

        如果调整 GridLayout 的大小，则布局中的所有项目都将重新排列。 它类似于基于小部件的 QGridLayout。 GridLayout 元素的所有可见子元素都将属于该布局。 如果你想要一个只有一行或一列的布局，你可以使用 RowLayout 或 ColumnLayout。 这些提供了更方便的 API，并提高了可读性。
        默认情况下，项目将根据流属性进行排列。 流属性的默认值为 GridLayout.LeftToRight。
如果指定了 columns 属性，它将被视为布局可以有多少列的最大限制，然后自动定位回到下一行的开头。 columns 属性仅在 flow 为 GridLayout.LeftToRight 时使用。

 通常不使用GirdLayout ，当设置的行数小于实际排布需要的行数，设置无效，如：

Gird:

        Grid 是一种以网格形式定位其子项的类型。
        Grid 创建一个足够大的单元格网格以容纳其所有子项，并将这些项从左到右和从上到下放置在单元格中。 每个项目都位于其单元格的左上角，位置为 (0, 0)。
        Grid 默认为四列，并根据需要创建尽可能多的行以适合其所有子项。 可以通过设置 rows 和         columns 属性来限制行数和列数。
例如，下面是一个 Grid，其中包含五个不同大小的矩形：

如果 Grid 中的某个项目不可见，或者它的宽度或高度为 0，则该项目将不会被布置并且在列中将不可见。 此外，由于 Grid 会自动定位其子项，因此 Grid 中的子项不应设置其 x 或 y 位置或使用任何锚属性锚定自身。
有关使用 Grid 和其他相关定位器类型的更多信息，请参阅项目定位器。