QML学习笔记（十四）QML的自定义模块

前言

在前面的学习中，我们已经学会了自定义组件的实现方式，并通过属性暴露来让外部进行调用和交互。但只是这种程度还不足以满足我们实际开发的需求，为了实现定制组件的更好管理，我们需要引入模块的概念。
（在我学习的视频中，主要讲述了QT6+cmake的方法，但无奈我当前是QT5，所以我接下来只记录我学习QT5+qmake的模块实现）

一、前期准备

在正式学习之前，我们先准备我们的一系列文件。
新建工程QmlCustomModules，然后先在main.qml的同目录下，创建一个custom_buttons文件夹。
然后我们将之前的MButton.qml移动进去，并拷贝三个单独的按钮组件，分别为RedButton.qml、GreenButton.qml和BlueButton.qml。注意文件命名最好大写开头，至于里面的颜色修改，你懂的，代码我就只放红色按钮的上来吧。
最后把MButton改成GreyButton。

import QtQuick 2.0

Item{
   
   
    id: rootId
    property alias buttonText: buttonTextId.text
    property alias buttonColor: containerRectId.color
    width: containerRectId.width
    height: containerRectId.height

    signal buttonClicked

    Rectangle {
   
   
        id: containerRectId
    //        width: 100
    //        height: 30
        width: buttonTextId