QML 中有几种方式能定位项。
下文是简短概述。更多细节,见 重要 Qt Quick 概念 - 位置 .
Items can be placed at specific x,y coordinates on the screen by setting their x,y properties. This will setup their position relative to the top left corner of their parent, according to the 视觉坐标系 规则。
Combined with using bindings instead of constant values for these properties, relative positioning is also easily accomplished by setting the x and y coordinates to the appropriate bindings.
import QtQuick 2.3 Item { width: 100; height: 100 Rectangle { // Manually positioned at 20,20 x: 20 y: 20 width: 80 height: 80 color: "red" } }
The
Item
type provides the abilitiy to anchor to other
Item
types. There are seven anchor lines for each item:
left
,
right
,
vertical center
,
top
,
bottom
,
baseline
and
horizontal center
. The three vertical anchor lines can be anchored to any of the three vertical anchor lines of another item, and the four horizontal anchor lines can be anchored to the horizontal anchor lines of another item.
For full details, see 锚点位置 and the documentation of the anchors property .
import QtQuick 2.3 Item { width: 200; height: 200 Rectangle { // Anchored to 20px off the top right corner of the parent anchors.right: parent.right anchors.top: parent.top anchors.margins: 20 // Sets all margins at once width: 80 height: 80 color: "orange" } Rectangle { // Anchored to 20px off the top center corner of the parent. // Notice the different group property syntax for 'anchors' compared to // the previous Rectangle. Both are valid. anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 } width: 80 height: 80 color: "green" } }
For the common case of wanting to position a set of types in a regular pattern, Qt Quick provides some positioner types. Items placed in a positioner are automatically positioned in some way; for example, a Row positions items to be horizontally adjacent (forming a row).
For full details see Item Positioners and the documentation for 定位器类型 .
import QtQuick 2.3 Item { width: 300; height: 100 Row { // The "Row" type lays out its child items in a horizontal line spacing: 20 // Places 20px of space between items Rectangle { width: 80; height: 80; color: "red" } Rectangle { width: 80; height: 80; color: "green" } Rectangle { width: 80; height: 80; color: "blue" } } }
布局类型 function in a similar way as positioners but allow further refinement or restrictions to the layout. Specifically, the layout types allow you to:
GroupBox { id: gridBox title: "Grid layout" Layout.fillWidth: true GridLayout { id: gridLayout rows: 3 flow: GridLayout.TopToBottom anchors.fill: parent Label { text: "Line 1" } Label { text: "Line 2" } Label { text: "Line 3" } TextField { } TextField { } TextField { } TextArea { text: "This widget spans over three rows in the GridLayout.\n" + "All items in the GridLayout are implicitly positioned from top to bottom." Layout.rowSpan: 3 Layout.fillHeight: true Layout.fillWidth: true } } }
The snippet above comes from the 基本布局 example. The snippet shows the simplicity of adding various fields and items in a layout. The GridLayout can be resized and its format are customizable through various properties.
For more information about the layout types, visit:
注意: Qt Quick Layouts 在 Qt 5.1 引入且要求 Qt Quick 2.1.