QML Component

1 简述

Component是什么?
翻译过来就是组件，如Button、Label,都是组件，通常由一个.qml文件实现，而文件名就是组件的名称。

在C++中，我们实现一个由多个子组件构成的复杂的组件，可以在一个cpp文件中实现，一个cpp可是写多个类的实现。

但qml文件中只允许存在一个根节点，可以理解为只能实现一个类。

但借助Component，你可以在qml文件中定义内联组件，达到代码复用目的。

可以理解为类中子类。

Component可以做什么?
在qml文件中实现组件的子组件，而不必新建qml文件。

Loader加载Component也可以连接信号设置属性

2 示例：内联组件实现

如图，实现一个区域选择器

有8个锚点，样式一样，我们不想写8个Rectangle，因为修改锚点颜色或者样式要修改8处代码。

也达不到代码复用的目的。

可以声明一个内联锚点类，用Loader创建8次就行

    Item{
        id: root
        //矩形边框
        Rectanglg{
        	anchors.fill: parent
        	...
		}
        //锚点组件
        Component{
            id: _rectAnchor
            MouseArea {
                hoverEnabled: true
                cursorShape: Qt.SizeVerCursor
                Rectangle{
                    anchors.centerIn: parent
                    width: root.handleWidth
                    height: root.handleWidth
                    color: root.color
                    border.color: "white"
                    border.width: 1
                }
            }
        }
        //8个锚点
        Loader{
            anchors.top: root.top
            anchors.left: root.left
            sourceComponent: _rectAnchor
        }
        Loader{
            ...
        }
        Loader{
            ...
        }
        ...
    }
}

3 内置信号使用

最2个常用的信号。

如果我们希望组件创建完成的时候执行一些代码进行初始化，在c++中你可以在构造函数中执行初始化代码。

但qml没有构造函数。

不过他有对象创建完成的信号，写个信号处理函数即可，如下

//显示天气的Text
Text{
	id:textWeather
	text: qsTr("未知")
	//对象实例化完成的信号
	Component.onCompleted:{
		//获取天气
		textWeather.text = ...
	}
	//对象释放的信号
	Component.onDestruction: {
		console.log("对象释放")
	}
}