4. 布局管理

在工业HMI界面开发中，布局管理决定了界面能否在不同分辨率、不同屏幕比例、不同语言环境下保持稳定可用。QML 提供了两套布局体系：一套是定位器（Positioner），包括 Row、Column、Grid、Flow；另一套是Qt Quick Layouts 模块，包括 RowLayout、ColumnLayout、GridLayout、StackLayout。此外，锚布局（Anchor）通过锚线建立元素之间的相对约束关系。理解它们的差异与适用场景，是构建自适应工业界面的基础。

一、核心原理：三类布局机制的本质差异

Row、Column、Grid、Flow 属于定位器，它们只负责把子项按规则排列，不改变子项的尺寸。子项保持自身 width/height，定位器根据子项尺寸计算整体尺寸。这类布局适合按钮组、指示灯阵列、标签栏等尺寸固定的场景。

Anchor 布局通过 top、bottom、left、right、horizontalCenter、verticalCenter、baseline 等锚线，把元素绑定到父项或兄弟项。它擅长表达“这个面板贴着父窗口右侧、高度撑满”这类相对关系，但锚线过多时容易产生循环依赖，且无法自动分配剩余空间。

Qt Quick Layouts 模块则引入了尺寸协商机制。子项通过 Layout.fillWidth、Layout.preferredWidth、Layout.minimumWidth、Layout.maximumWidth 等附加属性参与空间分配，布局容器根据权重和约束重新计算每个子项的实际尺寸。这是实现真正自适应界面的关键。

二、方法流程：从固定布局到自适应布局的改造步骤

1. 识别可变区域：确定哪些面板需要随窗口缩放（如趋势图、报警列表），哪些保持固定（如急停按钮、状态灯）。
2. 外层用 Layouts 划分区域：用 RowLayout/ColumnLayout 把界面切成主区域，通过 Layout.fillWidth 和 Layout.preferredWidth 分配比例。
3. 内层用 Anchor 精确定位：在已分配好尺寸的面板内部，用锚线把标题、数值、单位对齐。
4. 局部用 Positioner 排列固定控件：按钮组、指示灯用 Row 或 Grid 排列，避免为每个控件写锚线。
5. 设置最小尺寸约束：为关键控件设置 Layout.minimumWidth，防止窗口过小时控件被压扁到不可用。

三、代码示例：工业报警面板的自适应布局

import QtQuick 2.15
import QtQuick.Layouts 1.15

Rectangle {
    width: 1024; height: 600
    color: "#1e293b"

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 12
        spacing: 10

        // 顶部状态栏：固定高度
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 56
            color: "#334155"
            Text {
                anchors.centerIn: parent
                text: "反应釜 A 监控"
                color: "#e2e8f0"; font.pixelSize: 20
            }
        }

        // 中部：左侧参数区 + 右侧趋势图，按 1:2 分配
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 10

            GridLayout {
                Layout.fillHeight: true
                Layout.preferredWidth: 1
                Layout.minimumWidth: 220
                columns: 2
                rowSpacing: 8; columnSpacing: 8

                Repeater {
                    model: ["温度", "压力", "液位", "流量"]
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        color: "#0f172a"; radius: 6
                        Text {
                            anchors.centerIn: parent
                            text: modelData
                            color: "#38bdf8"; font.pixelSize: 16
                        }
                    }
                }
            }

            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.preferredWidth: 2
                color: "#0f172a"; radius: 6
                Text {
                    anchors.centerIn: parent
                    text: "实时趋势曲线"
                    color: "#94a3b8"; font.pixelSize: 18
                }
            }
        }

        // 底部按钮组：用 Row 排列固定尺寸按钮
        Row {
            Layout.alignment: Qt.AlignRight
            spacing: 12
            Repeater {
                model: ["确认", "复位", "急停"]
                Rectangle {
                    width: 96; height: 40; radius: 6
                    color: index === 2 ? "#dc2626" : "#475569"
                    Text {
                        anchors.centerIn: parent
                        text: modelData; color: "white"
                    }
                }
            }
        }
    }
}

四、关键参数对照表

五、常见误区与复盘

掌握定位器、锚布局与 Layouts 模块的分工，是工业 HMI 自适应界面的核心能力。定位器负责固定控件的整齐排列，锚布局负责相对关系的精确表达，Layouts 模块负责剩余空间的动态分配。三者组合使用，才能在不同分辨率和不同工况下保持界面稳定、信息清晰、操作可靠。