QML mise en page de l'intervalle QT

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

ancres

	锚点布局使用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";}
    }

}

		效果图

Rangée

L'élément de ligne sera QML ses contrôles enfants sont disposés dans la même ligne, ne se chevauchent pas les uns les autres. Nous pouvons également l'utiliser pour définir les attributs de la distance d'espacement entre les contrôles enfants.

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

effet:

Colonne

L'élément de colonne QML ses contrôles enfants sont disposés dans la même ligne, ne se chevauchent pas les uns les autres. Nous pouvons également l'utiliser pour définir les attributs de la distance d'espacement entre les contrôles enfants. Par exemple, le code suivant produira des résultats comme indiqué:

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

effet:

la grille

élément de Grid QML dans ses contrôles enfants sont uniformément disposées dans une grille, ne se chevauchent pas les uns les autres, chaque sous-commandes sont placées dans le (0,0) position d'une cellule de la grille, à savoir l'angle supérieur gauche. les lignes de quadrillage et le nombre de lignes et de colonnes attribut définit une grille de colonnes, le nombre de colonnes est de quatre par défaut. Nous pouvons également utiliser la propriété de la grille pour définir la distance entre la cellule de grille, de noter ici que l'espacement horizontal et vertical est le même. Par exemple, le code suivant produira des résultats comme indiqué:

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

effet:

application mixte

Nous pouvons également utiliser la grille, la ligne et les applications de mélange de colonnes. L'exemple de code suivant a un effet comme indiqué:

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

effet: