【Qt6 QML Book 基础】04：QML组件（含完整可运行代码）

引言

在 QML 开发中，组件化是实现代码复用、提升开发效率的核心机制。通过将重复使用的 UI 模块封装为独立组件，开发者能够显著降低代码冗余，简化维护成本。本文将结合具体案例，详细解析如何通过文件级组件（File-Based Component）封装可复用按钮，并深入探讨组件设计中的 API 规范、根元素选择和属性导出技巧，帮助开发者建立规范的 QML 组件化开发思维。

一、运行效果图

本文示例代码运行后，将呈现一个具备中文交互的按钮组件：

• 初始状态：按钮显示 “开始”，下方状态文本显示 “等待中...”
• 点击状态：按钮触发点击事件，状态文本更新为 “按钮被点击了！”

二、组件化开发的核心价值

QML 的组件化开发本质是将独立功能的 UI 模块抽象为可复用单元，其核心优势体现在：

1. 代码复用：避免重复编写相似 UI 逻辑（如按钮样式、点击交互），一次开发可多次使用
2. 逻辑解耦：组件内部封装实现细节（如视觉样式、事件处理），外部仅通过接口交互
3. 统一交互：通过标准化 API 确保同类组件行为一致，提升用户体验的一致性
4. 易于维护：组件独立迭代，修改一处可影响所有调用场景

三、从 UI 到组件：基础按钮的提取过程

1. 原始 UI 结构（非组件化）

假设我们需要一个包含文本显示和点击交互的矩形按钮，非组件化实现如下：

Rectang