QML20、布局

1.概述

    首先，QML同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应UI的调整，其次代码维护起来也很困难。因此不推荐这样做。推荐大家使用的是以下三种布局管理器：Row,、Column、Grid、Flow，以及使用Anchor进行布局。

2.Row

    QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：

Row {
 
    spacing: 2
 
    Rectangle { color: "red"; width: 50; height: 50 }
 
    Rectangle { color: "green"; width: 20; height: 50 }
 
    Rectangle { color: "blue"; width: 50; height: 20 }
 
}

3.Column

    QML 中的 Column元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：

Column {
 
    spacing: 2
 
    Rectangle { color: "red"; width: 50; height: 50 }
 
    Rectangle { color: "green"; width: 20; he