QML官方系列教程——Use Case - Positioners and Layouts In QML

最新推荐文章于 2025-07-01 09:49:38 发布

翻译最新推荐文章于 2025-07-01 09:49:38 发布 · 5k 阅读

文章标签：

#QML官方系列教程

QML官方系列教程专栏收录该内容

24 篇文章

订阅专栏

本文介绍了QML中组件的位置与布局方法，包括手动定位、锚定及使用布局器等技术。通过实例展示了不同布局方式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

附网址：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" }
    }
}