1 Introduction

Qml inside layout mainly Row ,, Column, Grid, and the use of Anchor layout

Row
QML Row element in its child controls will be 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.
Column
QML The Column element will have its child controls are arranged on the same line do not overlap each other. We can also use it to define the attributes of the spacing distance between the child controls.
Grid layout
Grid layout has GridLayout, ColumnLayout, RowLayout, Column, Row, wherein ColumnLayout, RowLayout just a special case of GridLayout, ColumnLayout represents only one, RowLayout represents only one line.
GridLayout using columns, rows attribute space into cells, using columnSpacing, rowSpacing establishing the spacing between cells. And the size of the internal elements GridLayout determined by Layout.fillWidth, Layout.fillHeight and Layout.preferredWidth, Layout.preferredHeight, such Layout.fillWidth: true indicates fill the entire width of the cell, Layout.preferredWidth specify a recommended width. Layout.row, Layout.column determine which cell is in the inner elements. Note that, not the width of the internal element, the height, x, y and GridLayout bound, easily lead to binding cycle.
Column, Row html a float or similar in the StackPanel wpf, directly to one side by side elements, the spacing between the elements using the control spacing
Anchor Anchor layout
anchor allows us the flexibility to set the relative position of the two elements. It makes the relationship between the two elements form similar to a anchor, a fixed point is formed between the two elements. The behavior is similar to one kind of anchor links, which calculate the coordinates change than simply stronger. Since the relative position of the anchor is described, so that when in use the anchor, we must specify two elements, in which a declaration of an element relative to the other element. The anchor is one of the basic properties of the Item element, and thus applies to all QML visual elements.

2 Row layout

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

Here Insert Picture Description

3 Column Layout

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

Here Insert Picture Description

4 Grid Layout

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.

One example of layout GridLayout

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1

Window {
    id:gridLayoutWindow;
    title:"GridLayoutWindow";
    width: 480;
    height: 320;
    GridLayout{
        id: gridLayout1
        columns: 2;
        rows:2;
        anchors.fill: parent;
        anchors.margins: 5;
        columnSpacing: 0;
        rowSpacing: 0;

        Rectangle{
            id:rect00;
            color: "red";
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

        Rectangle{
            id:rect01;
            color: "blue";
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

        Rectangle{
            id:rect10;
            color: "green";
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            Layout.row:1;
            Layout.column: 1;
        }

    }
}

Here Insert Picture Description

SplitView layout example

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2

Window {
    width: 480;
    height: 320;
    title: "SplitView";

    SplitView{
        anchors.fill:parent;
        orientation: Qt.Horizontal;
        Rectangle{
            id:rect1;
            width:100;
            color:"red";
        }
        Rectangle{
            id:rect2;
            Layout.fillWidth: true;
            Layout.minimumWidth: 50;
            color:"blue";
        }
        Rectangle{
            id:rect3;
            width:100;
            color:"green";
        }
    }
}

Here Insert Picture Description

5 anchor layout

Here Insert Picture Description
An anchoring element has six lines (Top top, bottom bottom, left left, right and right, horizontalCenter levels, verticalCenter vertical middle). It has an anchor text baseline (Baseline) in the text element (Text Element) in the. Each anchor line has an offset (offset) value, in the top (top), bottom (bottom), left (left), right (R) of the anchor lines which are also referred to as a margin. For the horizontalCenter (levels) with verticalCenter (in the vertical) and Baseline (baseline of the text) it is called the offset value.

6 hybrid applications

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

Here Insert Picture Description