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

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

简单比较两种界面管理

锚点、排列的简单介绍

这两者并不是严格分开使用，经常会混用，比如有时候用锚点分区域，然后用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: container
    width: 400; height: 300
    
    Rectangle {  // 标题(20%)
        id: header
        color: "lightgreen"
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        height: container.height * ratio 
    }
    
    Rectangle {  // 内容(80%)
        color: "lavender"
        anchors {
            top: header.bottom
            bottom: parent.bottom
            left: parent.left
            right: 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: parent
    
    Rectangle
    {  // 标题(20%)
        color: "white"
        Layout.fillWidth: true
        Layout.preferredHeight: 2  // 比例系数 2 / (2+8) 
        Layout.fillHeight: true
		/******/
    }
    
    Rectangle
    {  // 内容(80%)
        color: "white"
        Layout.fillWidth: true
        Layout.preferredHeight: 8  // 比例系数 8 / (2+8)
        Layout.fillHeight: true
   		/******/
    }
}

二，布局的循环分配 ： 
父引用子，子引用父，导致计算出错：

ColumnLayout {
    anchors.fill: parent

    RowLayout {
        id: childlayout
        Layout.fillHeight: true 
        Layout.fillWidth: true  // 会先考虑子控件的宽

       Rectangle {
           id: chilstool
           Layout.fillHeight: true
           Layout.preferredWidth: parent.width * 0.8 // 又依赖父控件的宽

           color: "#ffffff"
       }

       Rectangle {
           id: chilstool2
           Layout.fillHeight: true
           Layout.preferredWidth: parent.width * 0.2

           color: "#ffffff"
       }
    }
 }

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

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

关键点：父布局的尺寸必须优先确定，子项才能根据父布局的可用空间调整自身尺寸。
父控件声明fillXXX时会考虑子项的对应宽/高属性，如果子项的尺寸又依赖父布局的实时尺寸，就会>导致循环。所以布局管理器下的fillxxx 和子项的 parent.width * 0.8不能一起出现