当前位置：首页 > news >正文

QT- QML Layout+anchors 布局+锚点实现窗口部件自适应比例

news 来源：原创 2025/6/1 7:25:55

布局管理

简单比较两种界面管理
锚点布局实现比例布局
布局管理实现比例布局

在日常打螺丝中，我们偶尔会需要实现界面各组件能按比例放置，自适应各种分辨率的需求。我用锚点和布局都实现过相关界面，记录下来两种方式实现的差异。跟大家一起学习。

简单比较两种界面管理

特性	布局系统	锚点系统
排列方式	自动流式布局	精确相对定位
比例控制	内置权重分配机制	需手动计算百分比
嵌套复杂度	适合多层嵌套结构	适合扁平化结构
动态调整	自动响应容器尺寸变化	需绑定尺寸信号
典型应用	表单布局/工具栏/等间距排列	悬浮元素/固定边栏/叠加层

锚点、排列的简单介绍

这两者并不是严格分开使用，经常会混用，比如有时候用锚点分区域，然后用Layout布局控制里面的细节，或者用Layout 控制布局，里面用anchors控制小细节。

锚点布局实现比例布局

QML锚点系统(anchors)提供基于相对关系的布局方式，通过元素间的空间关系实现精准定位。比较直观，使用起来很方便。
常用接口：

anchors.left: parent.right ，本组件的左边是父组件的左边，相对定位设置 ,还有right 、top 、bottom等
anchors.centerIn: parent ，在父组件里正中央居中
anchors.margins:30，整体边距控制或单独设置topMargin，bottomMargin，leftMargin，rightMargin
anchors.horizontalCenter: parent.horizontalCenter，相对父组件水平居中
anchors.verticalCenter parent.verticalCenter，相对父组件垂直居中

实现没有什么约束(或者是我目前的场景没有遇到)，直接根据相对比例，计算即可。一般这样的话，根组件(或者依赖的父组件)要确定好大小，或者成为子组件。

property int ratio : 0.2 // 可以独立成属性，方便修改管理Item {id: containerwidth: 400; height: 300Rectangle {  // 标题(20%)id: headercolor: "lightgreen"anchors {top: parent.topleft: parent.leftright: parent.right}height: container.height * ratio }Rectangle {  // 内容(80%)color: "lavender"anchors {top: header.bottombottom: parent.bottomleft: parent.leftright: parent.right}height: container.height * (1-ratio )}
}

布局管理实现比例布局

所有用布局管理器管理的组件都会自动拥有Layout.xxxx 相关的属性，可以设置它们来控制布局实现。我个人比较推荐使用这种方式，当然有不同想法也欢迎评论区讨论
常用接口：

Layout.alignment: Qt.AlignTop，控制对齐方式，有水平居中Qt.AlignHCenter 左对齐Qt.AlignLeft 等
Layout.fillWidth: true，控制是否填满宽度，高度是fillHeight
Layout.margins: 16 ，整体边距控制或单独设置leftMargin / topMargin等
Layout.preferredWidth: 50，设定首选宽度是50, minimumHeight是最小

用Layout布局管理实现比例分配有三个要点：

按比例分配：同时设置 Layout.fillxxx: true 和 Layout.preferredxxx，这样布局里的组件就会以preferredxxx作为比例因子，在分辨率变时组件相对大小保持不变。
固定像素：仅设置 Layout.preferredxxxx（不设置 fillxxxx）就会变成按给定的值固定属性
避免循环依赖：不要直接绑定 parent.width 或 parent.height，而是通过布局系统的内置机制实现自适应。

什么意思？给举两个例子就明白了：

一，正确按比例分配 ： 
两个chilstool会按照 8：2 的比例分配，且在窗口分辨率变化的情况下，比例依然不变：
如果想进一步细致控制，加大就行： 78 : 22，只需保证所有子项加起来 =1 或者 =100 能整除的就行ColumnLayout
{anchors.fill: parentRectangle{  // 标题(20%)color: "white"Layout.fillWidth: trueLayout.preferredHeight: 2  // 比例系数 2 / (2+8) Layout.fillHeight: true/******/}Rectangle{  // 内容(80%)color: "white"Layout.fillWidth: trueLayout.preferredHeight: 8  // 比例系数 8 / (2+8)Layout.fillHeight: true/******/}
}

二，布局的循环分配 ： 
父引用子，子引用父，导致计算出错：ColumnLayout {anchors.fill: parentRowLayout {id: childlayoutLayout.fillHeight: true Layout.fillWidth: true  // 会先考虑子控件的宽Rectangle {id: chilstoolLayout.fillHeight: trueLayout.preferredWidth: parent.width * 0.8 // 又依赖父控件的宽color: "#ffffff"}Rectangle {id: chilstool2Layout.fillHeight: trueLayout.preferredWidth: parent.width * 0.2color: "#ffffff"}}}

布局系统的工作流程
QML 的布局系统（如 RowLayout、ColumnLayout）在计算尺寸时遵循以下步骤：

1，收集子项的隐式尺寸：根据子项的内容（如文本长度、图片大小）确定其隐式宽度/高度。
2，计算父布局的隐式尺寸：基于子项的隐式尺寸，确定父布局的最小尺寸。
3，分配剩余空间：如果父布局的显式尺寸（如 width: 500）大于隐式尺寸，剩余空间按比例分配给设置了 fillWidth/fillHeight 的子项。