QML UI Layout

in theQMLapplication, the layout is undoubtedly a very important concept,QMLvisual elements are laid out in a variety of ways, often usingAnchorsanchor Layout, othersPositioners,Layoutsetc., described below.

1 , attribute positioning

If we say that our QML element position is fixed, then use the x , y properties are more intuitive and efficient to lay out than other layouts, and these attribute values are specific coordinates, known as static values, for example:

Rectangle {    width:360; height:360    color: "LightBlue"    Rectangle {        width:100; height:100        color: " Red "        Rectangle {            x:25; y:25            width:50; height:50            color:" Green "        }    }    Rectangle {        x : 100; y:100        width:80; height:80        color: "Yellow"}    }

the position of several colored rectangles above is x , y property to be set, which is relatively simple.

2 , property binding

The properties of an object can also be bound to properties of other objects, and when the properties of other objects change, the object's properties are automatically updated, and the layout is bound to x , y properties, this layout is often used for dynamic layout, of course, dynamic layout is not limited to this method, but it is relatively simple to use, and see the following example:

Rectangle {    width:360; height:360    color: "LightBlue"    Rectangle {        id:rect        width:100; height:100< C5/>color: "Red"        Rectangle {            x:parent.width/2-width/2;            Y:PARENT.HEIGHT/2-HEIGHT/2;            width:50; height:50            color: "Green"        }        Mousearea {            anchors.fill:parent            onclicked: {                Parent.width + =                Parent.height + = Ten            }}    }    Rectangle {        x:rect.width + 5; y:rect.height + 5        width:80; height:80        color: "Yellow"    }}

in the example, the green rectangle and the yellow rectanglex,ycoordinates are bound to the red rectangle.width,Heighton.

3 , Anchors Layout

each one Item can all be imagined to have 7 line, as shown in the following section:

the diagram lists the6line, and there's aBaseline, which is used to locate the text content,BaselineOffsetto set the offset,Horizontalcenteroffsetand theVerticalcenteroffsetsimilarly. It is important to note that the anchor layout can only be used for its parent or sibling objects, and we alsoanchorchangesto change the anchor layout state,anchoranimationanimate, the property value of a direction can be "undefined ", it removes the direction of theAnchorseffect.

The anchor layout also provides properties for setting the object to remain white, as shown in:

the four-direction white can be set individually or by a margins Unified Settings.

Anchors Group Properties In addition to some of the properties mentioned above, there are anchors.fill/centerin/alignwhencentered three properties.

Item {width:360; height:360 Rectangle {id:container anchors.fill:parent color: "LightBlue "Component.onCompleted:state =" ToRight "Rectangle {id:redrect width:50; height:50 anchors.centerIn:parent color: "Red"} Rectangle {Id:yellowre CT width:50; Height:50 anchors.right:parent.right Anchors.rightmargin:5 Anchors.bottom:parent.bott Om anchors.bottommargin:5 color: "Yellow"} Rectangle {Id:green Rect width:50;                 Height:50 color: "Green"} states:state {name: "ToRight" anchorchanges { Target:greenrect Anchors.right:parent.right}} Transitions:tra nsition {anchoranimation {duration:1000}}}}

4 , Positioners positioning

There are also some dedicated toUILocator for LayoutsPositioners, such asRow,Column,Grid,Flow, they all inherit fromItem, you can usePositioner.index/isfirstitem/islastitemadditional properties, easy to use, can be viewedQtHelp documentation.

row-- Row layout.

column-- The column layout.

grid-- Grid Layout, is Row and the Column the collection.

flow-- Flow layout, similar to line wrapping in text editing.

5 , Layouts Layout

in theQMLImport in Fileqtquick.layoutsmodule, you can also use theColumnlayout,Rowlayout ,GridLayoutfor dynamic layout, this is mostly done using theLayoutthe additional properties provided. In addition,layoutmirroringyou can set a mirror effect for an existing layout, which is no longer one by one examples.

6 , advanced Applications

Qt Quick Some convenient models and views are also available, as well as UI layouts, which can be referenced by:

Http://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#qml-data-models

QML UI Layout