1.组件介绍

• 一个组件通常由一个qml文件定义(单独文件定义组件), 实际也可以在qml里面通过Component对象来嵌入式定义组件 (4小节讲解).
• Component对象封装的内容默认不会显示,除非被加载后才可能显示, 并且是可以重复加载和移除的.
• Component一般用来封装比较小,且需要重用的组件.

比如我们需要4个自定义按钮,我们只需要按钮颜色不同而已,此时就可以只需要定义一个按钮组件(Component),然后我们重复加载即可.而不是不停复制和粘贴来定义4个不同颜色的椭圆按钮.

2.单独文件定义组件

一个组件通常由一个qml文件定义,那么该文件名就是该组件的名字(类似于java,类名就是文件名).并且文件名最好是大驼峰格式.

由于我们是单独文件定义一个组件,所以不需要Component对象封装,并且创建好,我们就可以像使用qml其它元素一样来使用我们定义的组件.

首先我们创建一个名为DynamicBtn的自定义按钮组件:

DynamicBtn.qml内容如下所示:

import QtQuick 2.7
import QtQuick.Controls 2.0

Button {
id: btn
property var backColor: "#7BCBEB" // 背景颜色
property var fontPixelSize: 20 // 字体大小
property var fontColor: "#FFFFFF"

text: "button"  
implicitWidth: 100  
implicitHeight: 30  
hoverEnabled: true  
contentItem: Label {                    // 设置文本  
    id: btnForeground  
    text: parent.text  
    font.family: "Microsoft Yahei"  
    font.pixelSize: fontPixelSize  
    color: fontColor  
    horizontalAlignment: Text.AlignHCenter  
    verticalAlignment: Text.AlignVCenter  
    elide: Text.ElideRight  
}  
background: Rectangle {       // 绘制高亮范围  
    id: btnBack  
    color: backColor  
    radius: 6  
    Rectangle {  
        width: btnBack.width \* 0.9  
        height: btnBack.height \* 0.4  
        x:  btnBack.width \* 0.05  
        y:  btnBack.height \* 0.05  
        radius: 3  
        color:  Qt.lighter(btnBack.color, 1.19)

    }  
}  
onDownChanged: {  
    btnBack.color = down ? Qt.lighter(backColor, 0.9) : backColor // 设置按下的背景颜色  
}  
onHoveredChanged: {  
    btnBack.color = hovered ? Qt.lighter(backColor, 1.2) : backColor // 设置徘徊的背景颜色  
}  

}

然后我们在main.qml中就可以直接使用这个DynamicBtn组件了,就像使用qml内置的Window组件那样

main.qml内容如下所示:

Window{
visible: true
function onConfirmBtnClicked() {
console.log("你点击了确认按钮");
}
function onCancelBtnClicked() {
console.log("你点击了取消按钮");
}

Column {  
    spacing: 20  
    padding: 20  
    DynamicBtn {  
        id: confirmBtn  
        text: "确认"  
        backColor: "#5CA1F6"

    }  
    DynamicBtn {  
        id: cancelBtn  
        text: "取消"  
        backColor: "#FB6E62"  
    }  
    Component.onCompleted: {  
       confirmBtn.clicked.connect(onConfirmBtnClicked)  
       cancelBtn.clicked.connect(onCancelBtnClicked)  
    }  
}  

}

运行效果如下所示:

3.使用Loader对象动态加载和移除

在上节中,我们是在main.qml中直接使用这个DynamicBtn组件来静态显示,如果要动态加载和移除组件的话,则需要使用Loader对象,比如需要延时时间来显示对象之类的,都可以用Loader来实现.

Loader对象的属性如下所示:

• active : bool,默认为true,表示Loader是激活的,如果设置为false,那么加载的视图项将会被释放,但是不会影响source或 sourceComponent里的内容.
• asynchronous : bool,此属性保存组件是否将异步实例化,默认为false,在多个帧中创建组件声明的对象时，使用异步加载就可以降低动画中出现故障的可能性
• item : object,此属性保存当前加载的顶级对象。
• progress : real,此属性保存从网络加载QML数据的进度，从0.0（未加载）到1.0（完成）。大多数QML文件都很小，因此该值将迅速从0更改为1。
• source : url,此属性保存要实例化的QML组件的URL。要卸载当前加载的对象，请将此属性设置为空字符串，将source设置为新URL也将导致卸载由先前URL创建的项。
• sourceComponent : Component,此属性保存要实例化的Component，要卸载当前加载的对象，请将此属性设置为undefined
• status : enumeration,保存当前加载的状态,分别有

1. Loader.Null - the loader is inactive or no QML source has been set
2. Loader.Ready - the QML source has been loaded
3. Loader.Loading - the QML source is currently being loaded
4. Loader.Error - an error occurred while loading the QML source

Loader的信号如下所示:

• loaded() : 当status属性变为Loader.Ready成功加载后，会发出此信号。

我们还是以DynamicBtn组件为例,示例如下所示:

Window{
visible: true

function onLoad() {  
    loader1.source = "qrc:/DynamicBtn.qml"  
    loader2.source = "qrc:/DynamicBtn.qml"  
}  
function onRemove() {  
    loader1.source = ""  
    loader2.source = ""  
}  
function onConfirmBtnClicked() {  
    console.log("你点击了确认按钮");  
    btnText.text = "你点击了确认按钮"  
}  
function onCancelBtnClicked() {  
    console.log("你点击了取消按钮");  
    btnText.text = "你点击了取消按钮"  
}

Row {  
    id: row  
    spacing: 20  
    padding: 20  
    Button {  
        id: load  
        text: "加载"  
        onClicked: onLoad();  
    }  
    Button {  
        id: remove  
        text: "移除"  
        onClicked: onRemove();  
    }  
}

Column {  
    anchors.top: row.bottom  
    spacing: 20  
    padding: 20  
    Loader {  
        id: loader1  
        onLoaded: {  
            item.text = "确认"  
            item.backColor = "#5CA1F6"  
            item.clicked.connect(onConfirmBtnClicked)  
        }  
    }  
    Loader {  
        id: loader2  
        onLoaded: {  
            item.text = "取消"  
            item.backColor = "#FB6E62"  
            item.clicked.connect(onCancelBtnClicked)  
        }  
    }

    Text {  
        id: btnText  
        text: "等待按钮点击"  
    }  
}  

}

界面运行起来如下所示:

点击加载按钮后如下所示:

点击移除后,那么确认和取消按钮将会消失

4. 使用Component嵌入式定义组件

如果我们不想让自定义的按钮组件单独存在一个独立文件中,而是和main.qml一起的话,则需要用Component对象来封装它,修饰该对象是个组件对象.

并且Component只能包含一个顶层item,在这个item之外除了定义id外,不能定义其它任何属性.

然后我们在Loader的sourceComponent属性填入我们要加载的Component的id,即可加载显示.

Qt帮助示例如下所示:

import QtQuick 2.0

Item {
width: 100; height: 100

Component {
id: redSquare // Component里面只有一个id和一个顶层item,这里的顶层item是一个Rectangle矩形
Rectangle {
color: "red"
width: 10
height: 10
}
}
Loader { sourceComponent: redSquare } // 加载一个矩形
Loader { sourceComponent: redSquare; x: 20 } // 在x为20的位置处再次加载一个矩形
}

我们还是以DynamicBtn组件为例,来实现一个Component,示例如下所示:

import QtQuick 2.14
import QtQuick.Window 2.0
import QtQuick.Controls 2.0

Window{
visible: true

function onLoad() {  
    loader1.sourceComponent = dynamicBtn  
    loader2.sourceComponent = dynamicBtn  
}  
function onRemove() {  
    loader1.source = undefined  
    loader2.source = undefined  
}  
function onConfirmBtnClicked() {  
    console.log("你点击了确认按钮");  
    btnText.text = "你点击了确认按钮"  
}  
function onCancelBtnClicked() {  
    console.log("你点击了取消按钮");  
    btnText.text = "你点击了取消按钮"  
}

Row {  
    id: row  
    spacing: 20  
    padding: 20  
    Button {  
        id: load  
        text: "加载"  
        onClicked: onLoad();  
    }  
    Button {  
        id: remove  
        text: "移除"  
        onClicked: onRemove();  
    }

}

Column {  
    anchors.top: row.bottom  
    spacing: 20  
    padding: 20  
    Loader {  
        id: loader1  
        onLoaded: {  
            item.text = "确认"  
            item.backColor = "#5CA1F6"  
            item.clicked.connect(onConfirmBtnClicked)  
        }

    }  
    Loader {  
        id: loader2  
        onLoaded: {  
            item.text = "取消"  
            item.backColor = "#FB6E62"  
            item.clicked.connect(onCancelBtnClicked)  
        }  
    }

    Text {  
        id: btnText  
        text: "等待按钮点击"

    }  
}

Component {  
    id: dynamicBtn  
    Button {  
        property var backColor: "#7BCBEB"       // 背景颜色  
        text: "button"  
        implicitWidth: 100  
        implicitHeight: 32  
        hoverEnabled: true  
        contentItem: Label {                    // 设置文本  
            id: btnForeground  
            text: parent.text  
            font.family: "Microsoft Yahei"  
            font.pixelSize: 20  
            color: "#FFFFFF"  
            horizontalAlignment: Text.AlignHCenter  
            verticalAlignment: Text.AlignVCenter  
            elide: Text.ElideRight  
        }  
        background: Rectangle {  
            id: btnBack  
            color: backColor  
            radius: height / 4

            Rectangle {  
                width: btnBack.width \* 0.9  
                height: btnBack.height \* 0.4  
                x:  btnBack.width \* 0.05  
                y:  btnBack.height \* 0.05  
                radius: width / 2  
                color:  Qt.lighter(btnBack.color, 1.09)

            }  
        }  
        onDownChanged: {  
            btnBack.color = down ? Qt.lighter(backColor, 0.9) : backColor // 设置按下的背景颜色  
        }  
        onHoveredChanged: {  
            btnBack.color = hovered ? Qt.lighter(backColor, 1.1) : backColor // 设置徘徊的背景颜色  
        }  
    }  
}  

}

未完,下章学习组件其它动态创建方式:11.qml-通过方法来加载组件、字符串方式加载组件