【QML 快速入门】组件（Compontents）

最新推荐文章于 2025-01-22 17:07:35 发布

原创

最新推荐文章于 2025-01-22 17:07:35 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言 #c++

本文介绍了QML中的Component概念，它是Qt框架封装的可复用元素，可以独立定义在文件中或嵌入QML文档。组件不是Item的子类，通过Loader实例化后显示。文中通过一个简单的MyButton组件示例，讲解了文件式和嵌入式定义组件的方法，强调了Component在UI设计中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

Component 是由 Qt 框架或开发者封装好的、只暴露了必要接口的 QML 类型，可以重复利用的元素。一个 Component 就像一个黑盒子，它通过属性、信号、函数和外部世界交互。

QML 主要提供两种不同的方法来创建组件：一个 Component 可以定义在独立的 qml 文件中（例如 MyButton.qml），也可以嵌入到 qml 文档中来定义。如果一个 Component 比较小且只在某个 qml 文档中使用或者一个 Component 从逻辑上看从属于某个 qml 文档，那就可以采用嵌入的方式来定义该 Component 。你也可以与 C++ 的嵌套类对比来理解。

Component 通常用来给一个 view 提供图形化组件，比如ListView::delegate属性就需要一个 Component 来指定如何显示列表的每一个项。
Component 不是 Item 的派生类，而是从 QQmlComponent 继承而来，虽然它通过自己的顶层 item 为其它的 view 提供可视化组件，但它本身是不可见元素。你可以这么理解：你定义的组件是一个新的类型，它必须被实例化以后才可能显示。而要实例化一个嵌入在 qml 文档中定义的组件，则可以通过 Loader。后面我们详细讲述使用 Loader 的例子，这里先按下不表。

让我们来看看这个例子，我们创建了一个包含文本和鼠标区域的矩形框。它类似于一个简单的按钮，我们的目标就是让它足够简单。

import QtQuick 2.0

Item {
    id: root
    width: 140
    height: 120

    // 自定义内联按钮
    Rectangle {
        id: button
        x: 12; y: 12
        width: 116; height: 26
        color: "lightsteelblue"
        border.color: "slategrey"
        Text {
            anchors.centerIn