https://cwc1987.gitbooks.io/qmlbook-in-chinese/content/quick_starter/positioning_element.html
https://blog.csdn.net/qq_26611129/article/details/113933202
于QWidget类似，界面元素在除了使用坐标与锚定设置位置外，可使用定位器进行元素布局，定位器也是一个元素，在定位器对象中将需要布局的元素对象按具体的定位器规则进行布局。主要的布局方式有：Column(列）、Row(行）、Grid(栅格)、Flow(流)
image.png

定位器

定位器类似QWidget中的横、纵、栅格布局

Column(列）

Column（列）元素将它的子对象通过顶部对齐的列方式进行排列。spacing属性用来设置每个元素之间的间隔大小。

  1.  Column {
  2.         id: column
  3.         anchors.centerIn: parent
  4.         spacing: 8
  5.         Rectangle { width: 96 }
  6.         Rectangle { width: 96 }
  7.         Rectangle { width: 96 }
  8.     }

Row(行）

  1.  Row {
  2.         id: column
  3.         anchors.centerIn: parent
  4.         spacing: 8
  5.         Rectangle { width: 96 }
  6.         Rectangle { width: 96 }
  7.         Rectangle { width: 96 }
  8.     }

Grid(栅格)

  1. Grid {
  2.         id: grid
  3.         rows: 2
  4.         columns: 2
  5.         anchors.centerIn: parent
  6.         spacing: 8
  7.         Rectangle { width: 96; color:"blue"; }
  8.         Rectangle { width: 96; color:"red"; }
  9.         Rectangle { width: 96; color:"green"; }
  10.     }

Flow(流)

通过flow（流）属性和layoutDirection（布局方向）属性来控制流的方向。它能够从头到底的横向布局，也可以从左到右或者从右到左进行布局。作为加入流中的子对象，它们在需要时可以被包装成新的行或者列。为了让一个流可以工作，必须指定一个宽度或者高度，可以通过属性直接设定，或者通过anchor（锚定）布局设置。

  1. Flow {
  2.   anchors.fill: parent
  3.   anchors.margins: 4
  4.   spacing: 10
  6.   Text { text: "Text"; font.pixelSize: 40 }
  7.   Text { text: "items"; font.pixelSize: 40 }
  8.   Text { text: "flowing"; font.pixelSize: 40 }
  9.   Text { text: "inside"; font.pixelSize: 40 }
  10.   Text { text: "a"; font.pixelSize: 40 }
  11.   Text { text: "Flow"; font.pixelSize: 40 }
  12.   Text { text: "item"; font.pixelSize: 40 }
  13.  }

image.png默认从左到右，横向不够就自动换行显示

布局

qml中的布局是锚定anchors，和QWidget中的边框距和对其方式一致
image.png
一个元素有6条锚定线（top顶，bottom底，left左，right右，horizontalCenter水平中，verticalCenter垂直中）。在文本元素（Text Element）中有一条文本的锚定基线（baseline）。每一条锚定线都有一个偏移（offset）值，在top（顶），bottom（底），left（左），right（右）的锚定线中它们也被称作边距。对于horizontalCenter（水平中）与verticalCenter（垂直中）与baseline（文本基线）中被称作偏移值。

  1. anchors.alignWhenCentered : bool
  2. anchors.baseline : AnchorLine
  3. anchors.baselineOffset : real
  4. anchors.bottom : AnchorLine
  5. anchors.bottomMargin : real
  6. anchors.centerIn : Item
  7. anchors.fill : Item
  8. anchors.horizontalCenter : AnchorLine
  9. anchors.horizontalCenterOffset : real
  10. anchors.left : AnchorLine
  11. anchors.leftMargin : real
  12. anchors.margins : real    四周间隔
  13. anchors.right : AnchorLine
  14. anchors.rightMargin : real
  15. anchors.top : AnchorLine
  16. anchors.topMargin : real
  17. anchors.verticalCenter : AnchorLine
  18. anchors.verticalCenterOffset : real