3. Qt Quick控件与布局：常用控件与自适应设计

在嵌入式Qt Quick开发中，控件（Item）与布局（Layout）是构建用户界面的两大基石。控件负责呈现交互元素（如按钮、滑块、开关），而布局则决定这些元素在屏幕上的排列方式与伸缩行为。嵌入式设备屏幕尺寸差异极大（从2.4寸的工控屏到10.1寸的平板），且分辨率、DPI、横竖屏切换频繁，因此掌握控件属性、布局策略与自适应设计方法，是开发稳定、美观、可移植界面的前提。本章将系统讲解常用控件的核心属性、四种布局管理器的适用场景，以及基于锚定（Anchors）与百分比尺寸的自适应设计方法论。

上图展示了本章的知识结构：控件、布局与自适应策略三者相互关联。控件是交互的最小单元，布局管理器负责控件的排列与尺寸分配，而自适应设计则是将两者结合，使界面在不同屏幕下保持可用性与美观度。下面我们逐一深入。

3.1 常用控件：属性、信号与实战要点

3.1.1 核心原理：控件是“属性+信号”的封装

Qt Quick中的每个控件（如Button、Slider、Switch）本质上是一个可视化的QML对象，它封装了三类关键信息：外观属性（如颜色、尺寸、圆角）、状态属性（如enabled、checked、value）、交互信号（如clicked、toggled、valueChanged）。开发者通过修改属性来改变外观，通过连接信号来响应操作。与Qt Widgets不同，QML控件采用声明式语法，界面描述与逻辑处理分离，更适合快速迭代。

控件名称	核心属性	关键信号	典型应用场景
Button	text, enabled, highlighted	clicked	确认/取消操作
Slider	from, to, value, stepSize	valueChanged	音量调节、亮度控制
Switch	checked, enabled	toggled	开关设置项
TextField	text, placeholderText, echoMode	accepted, textChanged	参数输入、搜索框
ProgressBar	value, indeterminate	无（被动显示）	进度显示、加载状态
ComboBox	model, currentIndex	activated	模式选择、下拉菜单

3.1.2 操作流程：控件使用三步法

1. 实例化控件：在QML中直接声明控件标签，如 Button {}。
2. 配置属性：设置必要的属性值，如 text: "启动"、from: 0; to: 100。
3. 连接信号：使用 onClicked、onValueChanged 等信号处理器编写响应逻辑。

// 示例：一个带状态显示的开关与滑块联动
Switch {
    id: powerSwitch
    text: "电源"
    checked: true
    onToggled: {
        console.log("电源状态:", checked)
        slider.enabled = checked
    }
}
Slider {
    id: slider
    from: 0; to: 100; value: 50
    enabled: powerSwitch.checked
    onValueChanged: console.log("当前值:", value)
}

3.1.3 案例拆解：嵌入式设备亮度调节面板

假设我们要为一块7寸工控屏（分辨率1024×600）设计亮度调节面板。初始现象是：用户需要快速调节背光亮度，且调节过程要实时反馈。我们使用Slider作为主控件，配合一个文本标签显示百分比。

Slider {
    id: brightnessSlider
    from: 10; to: 100; stepSize: 5; value: 80
    onValueChanged: {
        brightnessLabel.text = Math.round(value) + "%"
        debounceTimer.restart()
    }
}
Text { id: brightnessLabel; text: "80%" }
Timer {
    id: debounceTimer
    interval: 300
    onTriggered: backend.setBrightness(brightnessSlider.value)
}

复盘经验：嵌入式设备中，Slider的 stepSize 不宜过小（如1%），否则用户难以精确控制，且频繁触发信号会增加CPU负载。建议根据实际调节范围设置5~10的步长。

3.1.4 常见误区与总结

总结：控件是界面交互的细胞，掌握其属性与信号是基础，但更重要的是理解信号触发的频率与代价，在嵌入式资源受限环境下做出合理设计。

3.2 布局管理器：Row、Column、Grid与StackLayout

3.2.1 核心原理：布局是尺寸分配的规则引擎

布局管理器（Positioner）负责自动计算子项（children）的位置与尺寸。Qt Quick提供了四种基础布局：Row（水平排列）、Column（垂直排列）、Grid（网格排列）、StackLayout（堆叠切换）。它们都继承自 Item，通过 spacing 属性控制间距，通过 Layout 附加属性（如 Layout.fillWidth）控制伸缩行为。理解布局的关键在于：布局只负责分配空间，不负责响应式缩放——后者需要结合锚定或百分比尺寸实现。

布局类型	排列方向	适用场景	关键属性
Row	水平	按钮组、工具栏	spacing, Layout.fillWidth
Column	垂直	表单、设置页	spacing, Layout.fillHeight
Grid	行列网格	键盘、矩阵开关	rows, columns, rowSpacing, columnSpacing
StackLayout	堆叠（一次显示一个）	多页面切换、向导	currentIndex

3.2.2 操作流程：选择布局的决策路径

1. 判断排列方向：若子项需水平或垂直单方向排列，选Row或Column；若需多行多列，选Grid。
2. 判断是否需要切换：若同一区域需显示不同内容（如设置页的不同子页），选StackLayout。
3. 判断是否需要伸缩：若子项需随窗口大小变化，必须使用 Layout.fillWidth 或 Layout.fillHeight，并配合 Layout.preferredWidth 设置初始尺寸。

// 示例：使用Grid布局实现3×3数字键盘
Grid {
    columns: 3
    spacing: 10
    Repeater {
        model: 9
        delegate: Button {
            text: index + 1
            width: 80; height: 80
        }
    }
}

3.2.3 案例拆解：多页面设置界面

一个嵌入式设备设置界面包含“网络”、“显示”、“声音”三个子页面。初始设计是使用三个独立的 Item 切换显示，但切换逻辑复杂且代码冗余。我们改用 StackLayout 重构。

StackLayout {
    id: settingsStack
    currentIndex: 0
    NetworkPage {}
    DisplayPage {}
    SoundPage {}
}
// 切换逻辑
ListView {
    model: ["网络", "显示", "声音"]
    delegate: ItemDelegate {
        text: modelData
        onClicked: settingsStack.currentIndex = index
    }
}

结果对比：重构后代码量减少约40%，且页面切换动画可通过 StackLayout 的 transition 属性轻松添加。风险点是：StackLayout的所有子项都会被实例化，若子页面较重（含大量图片），会占用额外内存。解决方法是使用 Loader 延迟加载。

3.2.4 常见误区与总结

总结：布局管理器是界面结构的骨架。选择正确的布局能大幅减少手动计算坐标的工作量，但需注意布局的嵌套层级不宜过深（建议不超过5层），否则影响渲染性能。

3.3 自适应设计：锚定、百分比与屏幕适配

3.3.1 核心原理：自适应是“相对”而非“”

嵌入式屏幕尺寸多样，自适应设计的核心思想是：所有尺寸和位置都相对于父容器或屏幕边缘计算。Qt Quick提供了两种主要机制：锚定（Anchors）和百分比尺寸。锚定允许子项相对于父项或其他兄弟项的边、中心进行定位；百分比尺寸则通过 width: parent.width * 0.5 实现。此外，Layout 附加属性中的 fillWidth、fillHeight 与 preferredWidth 配合，可实现布局内的弹性伸缩。

机制	语法示例	适用场景	注意事项
锚定	anchors.left: parent.left	固定边距、居中、等宽	锚定优先级高于布局管理器
百分比	width: parent.width * 0.3	固定比例区域	父项尺寸变化时自动更新
Layout附加属性	Layout.fillWidth: true	布局内弹性伸缩	需在布局管理器内使用

3.3.2 操作流程：自适应设计四步法

1. 确定基准分辨率：选择目标设备中最常见的分辨率（如1024×600）作为设计基准。
2. 划分区域：使用锚定或百分比将屏幕划分为顶部栏、内容区、底部栏等。
3. 设置弹性规则：内容区使用 Layout.fillWidth 和 Layout.fillHeight，固定区域使用 preferredWidth。
4. 测试极端情况：在最小分辨率（如800×480）和最大分辨率（如1920×1080）下验证布局不溢出、不重叠。

// 示例：自适应顶部栏与内容区
Rectangle {
    id: topBar
    height: 48
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    color: "#2c3e50"
}
Rectangle {
    id: contentArea
    anchors.top: topBar.bottom
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    color: "#ecf0f1"
}

3.3.3 案例拆解：横竖屏切换适配

某手持设备（屏幕5.5寸，分辨率1080×1920）在横屏时显示波形图，竖屏时显示参数列表。初始实现是两套QML文件，切换时加载不同文件，但维护成本高。我们改用单一文件 + 自适应布局。

Item {
    state: Screen.orientation === Qt.LandscapeOrientation ? "landscape" : "portrait"
    states: [
        State { name: "landscape"
            PropertyChanges { target: waveform; anchors.fill: parent }
            PropertyChanges { target: paramList; visible: false }
        },
        State { name: "portrait"
            PropertyChanges { target: waveform; anchors.top: parent.top; anchors.bottom: paramList.top; height: parent.height * 0.6 }
            PropertyChanges { target: paramList; visible: true; anchors.bottom: parent.bottom; height: parent.height * 0.4 }
        }
    ]
}

复盘经验：使用 state 切换布局时，注意 PropertyChanges 中不能同时修改 anchors 和 x/y，否则冲突。另外，竖屏时参数列表的 height 应使用百分比而非固定值，以适配不同屏幕高度。

3.3.4 常见误区与总结

总结：自适应设计的本质是“规则优先于数值”。通过锚定、百分比和状态切换，一套QML代码即可覆盖多种屏幕。但需注意，过度使用锚定可能导致布局难以维护，建议在复杂界面中结合布局管理器与锚定，各取所长。