Qt Quick快速入门之qml布局

　　Qml里面布局主要有两种，锚点布局、Grid布局。

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

}

　　

　　效果如下图

　　

　　Grid布局有GridLayout、ColumnLayout、RowLayout、Column、Row，其中ColumnLayout、RowLayout只是GridLayout的一种特例，ColumnLayout表示只有一列，RowLayout表示只有一行。

　　GridLayout使用columns、rows属性将空间分成若干单元格，使用columnSpacing、rowSpacing确立单元格之间的间隔。而GridLayout内部元素的大小由Layout.fillWidth、Layout.fillHeight以及Layout.preferredWidth、Layout.preferredHeight来确定，如Layout.fillWidth:true表示宽度填充整个单元格，Layout.preferredWidth则指定一个建议宽度。Layout.row、Layout.column确定内部元素处于哪个单元格。注意，不要将内部元素的宽度、高度、x、y与GridLayout进行绑定，容易导致绑定循环。

　　Column、Row类似于html中的float或是wpf中的StackPanel，会直接将元素一个个挨在一起，元素间的间隔使用spacing控制

　　下面是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;
        }

    }
}

　　效果如下所图

 　　

　　

　　SplitView用于提供带切分条的布局，下面是示例

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

　　下面是效果图，注意实际情况可以拖拉切分条

　　

　　OK，有了以上几种布局方式，通过一定的组合相信可以应对大部分布局需求了