Qml layout of Qt Quick Start and quickqml

Qml layout of Qt Quick Start and quickqml

There are two main types of Qml layout: Anchor layout and Grid layout.

The anchors attachment attribute is used to locate the edge of an element to the edge of another element to determine the position and size of the element. The following is an example

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

　　

Results:

　　

The Grid layout includes GridLayout, ColumnLayout, RowLayout, Column, and Row. ColumnLayout and RowLayout are only special cases of GridLayout. ColumnLayout indicates only one Column, and RowLayout indicates only one Row.

GridLayout uses the columns and rows attributes to divide the space into several cells, and uses columnSpacing and rowSpacing to determine the interval between cells. The size of the internal elements of GridLayout is determined by Layout. fillWidth, Layout. fillHeight and Layout. preferredWidth, Layout. preferredHeight, for example, Layout. fillWidth: true indicates that the width of the entire cell is filled, Layout. preferredWidth specifies a suggested width. Layout. row and Layout. column determine the cell in which the internal element is located. Note: do not bind the width, height, x, and y of the internal element to GridLayout, which may easily lead to a binding loop.

Column and Row are similar to the float in html or the StackPanel in wpf. The elements are directly put together, and the spacing between elements is controlled by spacing.

The following is an example of GridLayout layout.

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

The effect is as follows:

　　

SplitView is used to provide a layout with split entries. The following is an example.

import QtQuick 2.3import QtQuick.Window 2.0import QtQuick.Layouts 1.1import QtQuick.Controls 1.2Window {    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";        }    }}

The following figure shows how to drag and drop a shard.

　　

OK. With the above layout methods, we believe that we can meet most of the layout requirements through some combinations.