Qt Quick 响应式布局

布局是实现可调整大小用户界面的有效技术。然而，这种方法也有其局限性——我们无法在不牺牲可用性和美观性的前提下无限缩放项目。 在某些情况下，重新组织、删除或添加某些元素会更合理。适应不同设备（例如手机和平板）以及屏幕方向（横向或纵向）也可以采用类似的方式实现。这正是我们通常所说的响应式布局， Qt Quick Layouts 并提供了多种 API 来实现它们。

静态层级结构、自适应布局

布局具有层级结构，通常由声明式的 QML 代码定义。对于某些简单的响应式布局，只需保持层级结构不变，并调整一些影响布局的属性即可。

声明式描述

更改布局的最简单方法是使用简短的表达式修改布局属性及Layout 的关联属性。例如，您可以使用三元运算符根据布局宽度来调整布局。Item 属性（如Item.visible ，用于隐藏或显示界面的各个部分）也可以通过相同的方式进行修改。

在下面的代码片段中，该概念被用于在窗口宽度小于特定值时，将双栏布局转换为单栏布局。

GridLayout {
    columns: width < 300 ? 1 : 2
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

根据窗口宽度的不同，生成的布局如下所示。

虽然可以嵌套不同级别的布局和项目，但Items 只能在其所属的Item.parent 内移动。

状态

使用Qt Quick 状态也可以实现相同的结果。使用状态的好处在于，特定布局的Layout 属性（至少是会发生变化的那些）被集中收集在QML文件的单一位置。前面展示的示例可以如下实现，其外观和行为完全相同。

GridLayout {
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    states: [
        State {
            when: width < 300
            PropertyChanges { target: rectangle2; Layout.row: 1 }
            PropertyChanges { target: rectangle2; Layout.column: 0 }
        },
        State {
            when: width >= 300
            PropertyChanges { target: rectangle2; Layout.row: 0 }
            PropertyChanges { target: rectangle2; Layout.column: 1 }
        }
    ]
}

LayoutItemProxy

第三种方法是应用LayoutItemProxy 。前面展示的简约示例的实现可在类型文档中找到。与之前展示的解决方案不同，LayoutItemProxy 允许为不同的屏幕尺寸声明完全独立的布局。特别是在处理更复杂的布局时，这有助于改善并保持合理的源代码结构。

请注意，LayoutItemProxy API 目前处于技术预览阶段，未来在 Qt 版本中可能会发生变更或被移除。

自适应层次结构、自适应布局

更复杂的布局重构可能需要调整层次结构。例如，小布局中一个独立的按钮可能需要与其他按钮合并，并放置到大布局的容器中。 在某个布局中完全可见的项，在另一个较小的布局中可能需要使用Flickable 。在此场景下，最好依赖LayoutItemProxy 。LayoutItemProxy 允许将Items 在不同层级之间以及不同的Item.parent 之间进行移动。

“Qt Quick Layouts ——响应式布局示例”展示了一个项目在不同层次间移动的案例：一种情况下将其放入Flickable 中，另一种布局中则将其置于顶级。由此产生的两种布局如下所示。

实用链接：请查阅您的设计指南

许多设计指南都提供了创建响应式布局的帮助和技巧。利用上述 API 即可实现相应的技术方案。如需了解更多信息，建议参考以下链接：

• Apple 人机界面指南
• Material3 布局
• Microsoft Fluent 响应式设计技术