附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-layouts.html
Use Case - Positioners and Layouts In QML —— QML中的位置与布局
QML提供了多种调整组件位置的方式。
下面只是一个简要的介绍。要了解更多信息,请参考Important Concepts In Quick - Positioning。
Manual Positioning —— 手动定位
通过设置组件的x,y属性可以将他们放置在特定的坐标(x,y)上,该坐标以它们父对象的左上角为原心,visual coordinate system讲述了有关的规则。
通过对这些属性使用适当的绑定而不是常数赋值,我们很容易通过设置x,y的值实现相对布局。
<span style="font-size:14px;">import QtQuick 2.0
Item {
width: 100; height: 100
Rectangle {
// Manually positioned at 20,20
x: 20
y: 20
width: 80
height: 80
color: "red"
}
}</span>
·
Anchors —— 锚
Item类型提供了将自身系到其他Item对象上的能力。每个Item都有6根锚线,left,right,vertical center,top,bottom and horizontal center。垂直方向的3根锚线可以系到其他对象的任意3根垂直锚线上,水平方向类似。
更多的细节,可以参考Positioning with Anchors以及anchors property文档。
import QtQuick 2.0
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"
}
}
·
Positioners and Layouts —— 定位器和布局
很多情况下我们都希望将一组组件以某个规律进行定位,Qt Quick提供了一些定位器类型。放置在定位器中的组件将以某种方式自动布局;例如Row定位类型会将其内部的组件水平布局。
更多的细节参见Item Positioners以及the positioner types文档。
import QtQuick 2.0
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" }
}
}
·
如果定位与尺寸需要实时调整,你可以使用Qt Quick Layouts。