QT之QML布局

	QML布局方式：Anchors，Row,、Column、Grid

Anchors

	锚点布局使用anchors附件属性将一个元素的边定位到另一个元素的边，从而确定元素的位置和大小。当前图形相对于某一图形的位置(可重叠)

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    id:anchorLayoutWindow;
    width: 480;
    height: 320;
    title: "AnchorLayout";

    Rectangle{
        id:rect1;
        width: parent.width;
        height:50;
        color:"blue";
        anchors.top: parent.top;
        Text{ text: "Top"; anchors.horizontalCenter: parent.horizontalCenter;anchors.top:parent.top; color:"white"; }
    }

    Rectangle{
        id:rect2;
        width: parent.width/4;
        color: "red";
        anchors.top:rect1.bottom;
        anchors.bottom: rect4.top
        anchors.left: parent.left;
        Text{ text: "Left"; anchors.verticalCenter: parent.verticalCenter; anchors.left: parent.left;color:"white"; }
    }

    Rectangle{
        id:rect3;
        color: "green";
        width:rect2.width;
        anchors.top:rect1.bottom;
        anchors.bottom: rect4.top;
        anchors.right:parent.right;
        Text{ text: "Right";anchors.right: parent.right;anchors.verticalCenter: parent.verticalCenter;color:"white"; }
    }

    Rectangle{
        id:rect4;
        width: parent.width;
        height:50;
        color:"yellow";
        anchors.bottom: parent.bottom;
        Text{ text: "Bottom"; anchors.horizontalCenter: parent.horizontalCenter;anchors.bottom: parent.bottom;color:"blue";}
    }

    Rectangle{
        id:rect5;
        color:"#FF605066";
        anchors.top:rect1.bottom;
        anchors.bottom: rect4.top;
        anchors.left: rect2.right;
        anchors.right: rect3.left;
        Text{ text: "Center";anchors.centerIn: parent; color:"white";}
    }

}

		效果图

Row

QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。

Row {
    spacing: 2					//  控件之间的距离为2			
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

效果：

Column

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

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

效果：

Grid

QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的rows 和columns属性定义网格的行数和列数，列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果：

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 10; height: 10 }
}

效果：

混合应用

我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果：

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

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

效果：