使用案例 - QML 中的定位器和布局

在 QML 中有多种方式可以对项目进行定位。

以下是简要概述。更多详情请参阅 Qt Quick 重要概念 - 定位。

手动定位

可以通过设置其 x,y 属性，将项目放置在屏幕上特定的 x,y 坐标位置。这将根据视觉坐标系规则，根据其父元素的左上角来设置它们的位置。

结合使用绑定而不是常量值来设置这些属性，也可以通过设置 x 和 y 坐标来轻松实现相对定位。

import QtQuick

Item {
    width: 100; height: 100

    Rectangle {
        // Manually positioned at 20,20
        x: 20
        y: 20
        width: 80
        height: 80
        color: "red"
    }
}

锚点

类型 Item 提供了将点连接到其他 Item 类型的功能。每个项目有七条锚线：左侧、右侧、垂直居中、顶部、底部、基线和 水平居中。三条垂直锚线可以连接到另一个项的任意三条垂直锚线上，而四条水平锚线可以连接到另一个项的水平锚线上。

有关详细信息，请参阅使用锚点定位以及锚点属性的文档。

import QtQuick

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"
    }
}

定位器

对于想要在常规图案中对一组类型进行定位的常见情况，Qt Quick 提供了一些定位器类型。放置在定位器中的项目会自动以某种方式进行定位；例如，一个 Row 将项目定位为水平相邻（形成一个行）。

有关详细信息，请参阅项目定位器。

import QtQuick

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" }
    }
}

布局类型

布局类型 与定位器功能类似，但允许对布局进行进一步细化或限制。具体来说，布局类型允许您

设置文本和其它项目的对齐方式
自动调整应用分配的面积的大小
设置大小约束，如最小或最大尺寸
设置布局内项目之间的间距

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

上述代码段来自基本布局示例。该代码段展示了在布局中添加各种字段和项目的简单性。 GridLayout 可以调整大小，其格式可以通过各种属性进行自定义。

有关布局类型的更多信息，请访问

Qt Quick 布局概述
基本布局示例

注意：Qt Quick 布局于 Qt 5.1 中引入，需要 Qt Quick 2.1。