Qt Quick快速入門之qml佈局

重點內容
Qml裏面佈局主要有兩種，錨點佈局、Grid佈局。

　　錨點佈局使用anchors附件屬性將一個元素的邊定位到另一個元素的邊，從而確定元素的位置和大小。下面是示例
複製代碼

1 import QtQuick 2.3
2 import QtQuick.Window 2.0
3
4 Window {
5 id:anchorLayoutWindow;
6 width: 480;
7 height: 320;
8 title: “AnchorLayout”;
9
10 Rectangle{
11 id:rect1;
12 width: parent.width;
13 height:50;
14 color:”blue”;
15 anchors.top: parent.top;
16 Text{ text: “Top”; anchors.horizontalCenter: parent.horizontalCenter;anchors.top:parent.top; color:”white”; }
17 }
18
19 Rectangle{
20 id:rect2;
21 width: parent.width/4;
22 color: “red”;
23 anchors.top:rect1.bottom;
24 anchors.bottom: rect4.top
25 anchors.left: parent.left;
26 Text{ text: “Left”; anchors.verticalCenter: parent.verticalCenter; anchors.left: parent.left;color:”white”; }
27 }
28
29 Rectangle{
30 id:rect3;
31 color: “green”;
32 width:rect2.width;
33 anchors.top:rect1.bottom;
34 anchors.bottom: rect4.top;
35 anchors.right:parent.right;
36 Text{ text: “Right”;anchors.right: parent.right;anchors.verticalCenter: parent.verticalCenter;color:”white”; }
37 }
38
39 Rectangle{
40 id:rect4;
41 width: parent.width;
42 height:50;
43 color:”yellow”;
44 anchors.bottom: parent.bottom;
45 Text{ text: “Bottom”; anchors.horizontalCenter: parent.horizontalCenter;anchors.bottom: parent.bottom;color:”blue”;}
46 }
47
48 Rectangle{
49 id:rect5;
50 color:”#FF605066”;
51 anchors.top:rect1.bottom;
52 anchors.bottom: rect4.top;
53 anchors.left: rect2.right;
54 anchors.right: rect3.left;
55 Text{ text: “Center”;anchors.centerIn: parent; color:”white”;}
56 }
57
58 }

複製代碼

　　效果如下圖

　　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佈局的一個示例
複製代碼

1 import QtQuick 2.3
2 import QtQuick.Window 2.0
3 import QtQuick.Layouts 1.1
4
5 Window {
6 id:gridLayoutWindow;
7 title:”GridLayoutWindow”;
8 width: 480;
9 height: 320;
10 GridLayout{
11 id: gridLayout1
12 columns: 2;
13 rows:2;
14 anchors.fill: parent;
15 anchors.margins: 5;
16 columnSpacing: 0;
17 rowSpacing: 0;
18
19 Rectangle{
20 id:rect00;
21 color: “red”;
22 Layout.fillWidth: true;
23 Layout.fillHeight: true;
24 }
25
26 Rectangle{
27 id:rect01;
28 color: “blue”;
29 Layout.fillWidth: true;
30 Layout.fillHeight: true;
31 }
32
33 Rectangle{
34 id:rect10;
35 color: “green”;
36 Layout.fillWidth: true;
37 Layout.fillHeight: true;
38 Layout.row:1;
39 Layout.column: 1;
40 }
41
42 }
43 }

複製代碼

　　效果如下所圖

　　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，有了以上幾種佈局方式，通過一定的組合相信可以應對大部分佈局需求了