Back to Qt.io
Contact Us Blog Download Qt
本页内容

Qt Quick Layouts - 响应式布局示例

演示了如何使用LayoutItemProxy 来构建响应式用户界面。

本示例展示了如何结合使用 LayoutProxyItems和布局来创建响应式布局。

运行示例

您可以通过以下方式运行示例：

创建项目

LayoutItemProxy 类型允许在不同的布局中使用同一个项，尽管同一时间只能显示一个布局。这可用于创建能够适应窗口或屏幕大小的响应式布局。

两个展示响应式布局的窗口：窄视图采用紧凑网格，宽视图采用侧边栏

首先，我们需要定义所有将在用户界面中出现的项。我们使用 AnnotatedRect，这是一种带有附加文本的简单矩形。

Rectangle {
    id: contentItem
    Layout.fillWidth: true
    implicitHeight: grid.implicitHeight
    implicitWidth: grid.implicitWidth
    color: "#00414A"

    GridLayout {
        id: grid
        anchors {
            fill: parent
            margins: 8
        }
        columns: Math.max(1, Math.min(Math.round(width / 130), 6))
        Repeater {
            model: 60
            delegate: Rectangle {
                required property int index
                Layout.fillWidth: true
                Layout.margins: 8
                implicitWidth: 200
                implicitHeight: width
                radius: width / 10
                gradient: Gradient {
                    GradientStop { position: -0.2; color: "#2CDE85" }
                    GradientStop { position: 1.2; color: "#00414A" }
                }
                Text {
                    color: "#ffffff"
                    font.pointSize: 22
                    anchors.centerIn: parent
                    text: parent.index + 1
                }
            }
        }
    }
}

Button {
    id: a
    text: "Text"
    icon.source: "./icons/text.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: b
    text: "Grid 1"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: c
    text: "Grid 2"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: d
    text: "Settings"
    icon.source: "./icons/settings.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

创建布局

现在，我们可以使用LayoutItemProxies 声明各种布局，并针对之前声明的项。单个布局的定义如下。

ColumnLayout {
    id: smallLayout
    anchors.fill: parent

    Flickable {
        Layout.fillHeight: true
        Layout.fillWidth: true
        contentWidth: width
        contentHeight: gl.implicitHeight
        clip: true
        ScrollIndicator.vertical: ScrollIndicator { }
        LayoutItemProxy {
            id: gl
            width: parent.width
            height: implicitHeight
            target: contentItem
        }
    }

    RowLayout {
        Layout.fillHeight: false
        Layout.fillWidth: true
        Layout.margins: 5
        LayoutItemProxy{ target: a; }
        LayoutItemProxy{ target: b; }
        LayoutItemProxy{ target: c; }
    }
}

此代码片段展示了使用LayoutItemProxy 的多种方式。最简单的方法是将LayoutItemProxies 添加到布局中，如这里的RowLayout 所示。 此外，我们为LayoutProxyItem设置了一个额外的Layout 附加属性，该属性仅会影响此特定布局中的目标项。进一步观察可知，项d 在第一个布局中未被使用，因此在第二个布局中会被LayoutItemProxy 自动隐藏。另一种使用方式是将LayoutItemProxy 作为Flickable 的内容进行设置。

另一个布局声明如下。

RowLayout {
    id: largeLayout
    anchors.fill: parent
    ColumnLayout {
        Layout.minimumWidth: 100
        Layout.fillWidth: true
        Layout.margins: 2
        LayoutItemProxy{ target: a }
        LayoutItemProxy{ target: b }
        LayoutItemProxy{ target: c }
        Item { Layout.fillHeight: true }
        LayoutItemProxy{ target: d }
    }

    LayoutItemProxy {
        Layout.fillHeight: true
        Layout.fillWidth: true
        target: contentItem
    }
}

此处展示了LayoutItemProxies 可与真实的Items 在同一层级上协同使用。总体而言，LayoutItemProxy 具有灵活性，支持项目和布局的嵌套结构。

设置布局

在定义了smallLayout 和largeLayout 这两个布局后，我们可以继续设置适合当前应用程序大小的布局。为此，我们定义了一个新函数，该函数会在窗口初始化时以及宽度发生变化时被调用：

function setFittingLayout() {
    if (width < 450) {
        smallLayout.visible = true
        largeLayout.visible = false
    } else {
        smallLayout.visible = false
        largeLayout.visible = true
    }
}
onWidthChanged: setFittingLayout()
Component.onCompleted: setFittingLayout()

除了在初始化后调用此函数外，我们还可以在声明式代码中隐藏除适合初始尺寸的正确布局之外的所有布局。

示例项目 @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.