自定义组件（二）

可重用组件设计、动态加载组件（Loader）、内联组件（Component）

本章将深入探讨更高级的组件技术，包括如何设计可重用组件、使用Loader动态加载组件以及定义内联组件（Component）。这些技术是构建模块化、高效QML应用的关键。

一、可重用组件设计原则

核心思想

可重用组件是QML开发的基石，设计时需遵循四大核心原则：

1. 高内聚，低耦合：组件内部功能紧密关联，对外依赖尽可能少，确保组件可独立使用、易维护。
2. 属性接口化：通过property暴露可配置参数，使用者无需修改组件内部代码即可调整特性。
3. 信号与槽通信：用signal和槽函数实现组件间交互，避免直接操作其他组件内部元素，保障独立性。
4. 文档与示例：添加清晰注释和使用示例，降低其他开发者的使用门槛。
5. 
   

常见设计模式

可重用组件有三类典型设计模式，对应不同场景：

• 容器组件：作为父容器管理布局与子项状态，适合卡片、分组框、列表项等承载内容的场景。
• 控件组件：聚焦实现具体交互功能，比如自定义按钮、带图标的输入框，核心是封装交互逻辑。
• 样式组件：专门定义视觉样式，通过属性绑定动态切换外观，适合主题化按钮、可切换样式的面板。
• 
  

代码示例：可配置按钮组件

// MyButton.qml
import QtQuick 2.15

Rectangle {
    id: root
    // 暴露给外部的属性接口
    property string text: "按钮"
    property color btnColor: "#4CAF50"
    property alias fontSize: label.font.pixelSize
    signal clicked() // 自定义信号

    width: 120; height: 50
    radius: 8
    color: btnColor

    Text {
        id: label
        anchors.centerIn: parent
        text: root.text
        color: "white"
        font.bold: true
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked() // 触发信号
            console.log("按钮被点击:", root.text)
        }
    }
}

该组件通过属性暴露文字、颜色、字体大小，用自定义信号传递点击事件，完全符合可重用设计原则，使用者可轻松定制样式，无需关心内部实现。

二、动态加载组件（Loader）

Loader 简介

Loader是QML专属的动态加载工具，它像一个“智能按需加载器”：既能延迟加载组件，避免启动时一次性加载所有内容拖慢速度；又能根据运行时条件切换组件，让界面更灵活，比如用户点击按钮切换不同页面模块。

Loader 关键属性与方法

• source/sourceComponent：指定要加载的QML文件路径，或内联定义的Component组件。
• active：控制组件是否激活加载，设为false可暂停加载。
• item：引用已加载的组件实例，通过它可访问组件的属性和方法。
• onLoaded：组件加载完成时触发的信号处理器，适合做加载后的初始化操作。
• 
  

代码示例：使用Loader切换页面

// Main.qml
import QtQuick 2.15

Column {
    spacing: 20
    Row {
        spacing: 10
        Button { text: "加载页面A"; onClicked: loader.source = "PageA.qml" }
        Button { text: "加载页面B"; onClicked: loader.source = "PageB.qml" }
        Button { text: "卸载"; onClicked: loader.source = "" }
    }

    Loader {
        id: loader
        width: 400; height: 300
        onLoaded: console.log("组件加载完成:", source)
    }
}

// PageA.qml
Rectangle {
    color: "lightgreen"
    Text { text: "这是页面A"; anchors.centerIn: parent }
}

// PageB.qml
Rectangle {
    color: "lightblue"
    Text { text: "这是页面B"; anchors.centerIn: parent }
}

💡提示：通过loader.item可访问加载组件的属性，比如loader.item.color = "yellow"即可修改页面A的背景色。

三、内联组件（Component）

Component 概念

Component允许在同一个QML文件内定义可重用组件，无需单独创建.qml文件。它像一个“局部组件模板”，适合定义简单、仅在当前文件使用的组件，或作为Loader的动态加载源。

使用场景对比

• 单独QML文件组件：优点是复用性高、结构清晰易维护，缺点是增加项目文件数量，适合复杂或多场景复用的组件。
• 内联Component：优点是封装性好、不污染全局命名空间、代码紧凑，缺点是仅能在当前文件复用，适合简单局部场景。
• 
  

代码示例：内联组件与Loader结合

import QtQuick 2.15

Rectangle {
    width: 400; height: 300
    color: "#FFF9C4"

    // 定义一个内联组件
    Component {
        id: redCircleComponent
        Rectangle {
            width: 100; height: 100
            radius: 50
            color: "red"
            border { width: 3; color: "darkred" }
            Text { text: "内联组件"; anchors.centerIn: parent; color: "white" }
        }
    }

    Column {
        anchors.centerIn: parent
        spacing: 20

        // 方式1：直接用Loader加载内联组件
        Loader {
            sourceComponent: redCircleComponent
        }

        // 方式2：通过createObject()动态创建实例
        Button {
            text: "动态创建圆形"
            onClicked: {
                var obj = redCircleComponent.createObject(parent, {"x": 150, "y": 50})
                if (obj) console.log("动态对象创建成功")
            }
        }

        // 方式3：作为ListView的委托组件
        ListView {
            width: 200; height: 100
            model: 3
            delegate: Component {
                Rectangle {
                    width: 180; height: 40
                    color: index % 2 ? "#E1F5FE" : "#F3E5F5"
                    Text { text: "项目 " + index; anchors.centerIn: parent }
                }
            }
        }
    }
}

这里展示了内联Component的三类常用场景：直接加载、动态创建实例、作为列表委托，覆盖了大部分局部复用需求。

四、综合实战：可重用的卡片组件

结合本章技术，设计一个支持展开收起、动态加载内容的卡片组件：

// ReusableCard.qml
import QtQuick 2.15

Rectangle {
    id: card
    // 暴露给外部的可配置属性
    property string title: "标题"
    property Component content: null // 接受内联组件作为内容
    property bool expanded: false

    width: 300
    height: expanded ? 200 : 60
    radius: 12
    border { width: 2; color: "#E0E0E0" }
    color: "white"

    // 展开收起的平滑动画
    Behavior on height { NumberAnimation { duration: 300 } }

    // 标题栏区域
    Rectangle {
        id: header
        width: parent.width
        height: 60
        radius: 12
        color: card.expanded ? "#2196F3" : "#FF9800"

        Text {
            anchors.left: parent.left; anchors.leftMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            text: card.title
            font.bold: true; font.pixelSize: 18
            color: "white"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: card.expanded = !card.expanded
        }
    }

    // 内容区域：用Loader动态加载传入的内联组件
    Loader {
        id: contentLoader
        anchors.top: header.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 10
        sourceComponent: card.content
        active: card.expanded // 展开时才加载内容
    }
}

// 使用示例
ReusableCard {
    title: "学生信息"
    expanded: true
    content: Component {
        Column {
            spacing: 10
            Text { text: "姓名: 小明"; font.pixelSize: 16 }
            Text { text: "年龄: 12岁"; font.pixelSize: 16 }
            Text { text: "爱好: 编程、绘画"; font.pixelSize: 16 }
        }
    }
}

这个组件融合了三大核心技术：通过属性暴露可配置接口（符合可重用原则），用Loader动态加载内容（优化性能），支持传入内联Component（灵活定制），还加入平滑动画提升体验。

本章小结

• 可重用组件设计：遵循高内聚低耦合原则，通过属性、信号和槽定义清晰接口，实现组件独立复用、易维护。
• Loader动态加载：按需加载组件，优化启动速度，可根据运行时条件切换界面模块，提升应用性能与灵活性。
• 内联Component：在单个QML文件内定义组件，适合局部复用，常与Loader或视图委托结合，避免文件冗余。
• 
  

掌握这些技术，你就能轻松构建模块化、可维护且性能优异的QML应用程序！