QML layout of the QT

	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

The Row element will QML its child controls are arranged in the same row, do not overlap each other. We can also use it to define the attributes of the spacing distance between the child controls.

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 }
}

effect:

Column

The Column element will QML its child controls are arranged in the same row, do not overlap each other. We can also use it to define the attributes of the spacing distance between the child controls. For example the following code will produce results as shown:

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

effect:

Grid

Grid element will QML in its child controls are uniformly arranged in a grid, do not overlap each other, each sub-controls are placed in the (0,0) position of a grid cell, i.e. the top left corner. Grid lines and the number of rows and columns attribute defines a grid of columns, the number of columns is four default. We can also use the Grid spacing property to define the distance between the grid cell, noted here that the horizontal and vertical spacing is the same. For example the following code will produce results as shown:

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 }
}

effect:

Mixed Application

We can also use Grid, Row and Column mixing applications. The following code example has an effect as shown:

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 }
}

effect: