QML Component

QML Component,第1张

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("对象释放")
	}
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/569097.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-09
下一篇 2022-04-09

发表评论

登录后才能评论

评论列表(0条)

保存