Qt Quick Layouts 是 Qt Quick 中用于管理用户界面布局的模块,在 Qt 6.0 中继续提供强大的布局管理功能。
一、主要功能
主要布局类型
RowLayout - 水平排列项目
ColumnLayout - 垂直排列项目
GridLayout - 网格排列项目
StackLayout - 堆叠项目(一次只显示一个)
Qt 6.0 中的变化和改进
更好的性能:Qt 6.0 对布局系统进行了优化,提高了性能
更一致的 API:与 Qt Widgets 的布局系统保持更好的一致性
改进的文档:提供了更清晰的示例和文档
基本用法示例
import QtQuick 2.15
import QtQuick.Layouts 1.15
RowLayout {
spacing: 10
Rectangle {
color: "red"
Layout.preferredWidth: 100
Layout.preferredHeight: 50
}
Rectangle {
color: "blue"
Layout.fillWidth: true
Layout.preferredHeight: 50
}
}
主要特性
自动调整大小:根据内容自动调整布局大小
对齐控制:可以控制项目在布局中的对齐方式
大小约束:可以设置最小、首选和最大尺寸
间距控制:可以设置项目之间的间距
嵌套布局:支持布局嵌套以实现复杂界面
常用属性
spacing
- 项目之间的间距Layout.alignment
- 项目在布局单元格中的对齐方式Layout.fillWidth
/Layout.fillHeight
- 是否填充可用空间Layout.preferredWidth
/Layout.preferredHeight
- 首选尺寸Layout.minimumWidth
/Layout.minimumHeight
- 最小尺寸Layout.maximumWidth
/Layout.maximumHeight
- 最大尺寸
注意事项
在 Qt 6.0 中,需要确保正确导入模块版本(如
QtQuick.Layouts 1.15
)布局项目应该是 Layout 的直接子项
对于复杂的布局,考虑使用嵌套布局而不是单一的复杂布局
Qt Quick Layouts 提供了一种声明式的方式来创建灵活、响应式的用户界面布局,是构建现代 Qt Quick 应用程序的重要工具。
二、架构解析
核心架构层次
QML 接口层
提供声明式的 QML 类型(RowLayout, ColumnLayout, GridLayout, StackLayout)
暴露布局属性和绑定机制给 QML 开发者
C++ 实现层
基于 Qt 的布局引擎实现
继承自 QQuickItem,与 Qt Quick 渲染管线集成
使用 QQuickLayoutAttached 处理附加属性
布局引擎
基于几何约束的布局计算系统
支持嵌套布局和复杂约束关系
与 Qt Widgets 的布局系统共享部分算法
关键组件
1. 布局项 (Layout Items)
每个参与布局的项都有一个关联的
QQuickLayoutAttached
对象存储布局相关属性(大小约束、拉伸因子、对齐方式等)
2. 布局算法
测量阶段:计算每个项的 minimum/preferred/maximum 尺寸
分配阶段:根据可用空间分配实际几何尺寸
递归处理:支持嵌套布局的层次式计算
3. 布局策略
基于约束的布局系统
自动处理内容变化和窗口大小变化
支持延迟布局更新以提高性能
数据流架构
[QML 声明] → [布局属性绑定] → [布局附加属性] → [布局引擎计算] → [几何位置更新] → [渲染管线]
性能优化机制
脏标记系统:只有发生变化的布局才会重新计算
批量更新:多个属性变化会合并为一次布局计算
缓存机制:缓存测量结果避免重复计算
异步布局:复杂布局可能分帧完成
与 Qt Widgets 布局系统的关系
共享相似的布局算法概念
但实现完全独立(Qt Quick 基于 GPU 渲染管线)
API 设计保持一致性以便于理解
典型布局计算流程
确定可用空间
收集所有子项的尺寸约束
计算满足约束的最佳分配方案
应用计算出的几何位置
通知渲染系统更新
扩展机制
可通过继承
QQuickLayout
创建自定义布局支持通过 attached properties 扩展布局行为
可与 Qt Quick 的转换和动画系统集成
Qt Quick Layouts 的这种架构设计使其能够高效处理动态 UI 布局,同时保持声明式编程的简洁性和灵活性,是构建响应式 Qt Quick 界面的核心基础设施。