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

如何在 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 类型提供了将这些项目锚定到其他项目类型的能力。每个项目有七条锚线：左、右、垂直中心、顶部、底部、基线和水平中心。三条垂直锚线可以锚定到另一个项目的三条垂直锚线，而四条水平锚线可以锚定到另一个项目的水平锚线。

有关完整详细信息，请参阅使用锚点定位和锚点属性文档。

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 提供了一些定位器类型。在定位器中放置的项目会自动以某种方式定位；例如，行将项目定位为水平相邻（形成一行）。

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

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

布局类型

布局类型以类似于定位器的方式工作，但允许进一步细化或限制布局。具体来说，布局类型允许您

• 设置文本和其他项目的对齐方式

• 自动调整大小和填充分配的应用程序区域

• 设置大小约束，例如最小或最大尺寸

• 设置布局中项目之间的间隔

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

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

• Qt Quick 布局概述

• 基本布局示例

注意

Qt Quick 布局在 Qt 5.1 中引入，需要 Qt Quick 2.1。