从文件加载组件
组件代码的文件名称:"ColorPicker.qml"
组件代码的放置位置:
组件的代码
importQtQuick2.0
importQtQuick.Controls1.1
//我在这个地方出错啦~,单独定义的组件用Rectangle来表示,否则会出现TypeError的错误,无法成功的导入组件
Rectangle{
id:colorPicker;
width:50;
height:30;
signalcolorPicked(colorclr);
propertyItemloader;
border.width:focus?2:0;
border.color:focus?"#90D750":"#808080";
MouseArea{
anchors.fill:parent
onClicked:{
colorPicker.colorPicked(colorPicker.color);
loader.focus=true;
}
}
Keys.onReturnPressed:{
colorPicker.colorPicked(colorPicker.color);
event.accepted=true;
}
Keys.onSpacePressed:{
colorPicker.colorPicked(colorPicker.color);
event.accepted=true;
}
}
一个独立文件中的Component,总结其加载方式
1、使用Loader加载---指定Loader的source属性
Loader{
id:redLoader;
focus:true;
anchors.left:parent.left;
anchors.leftMargin:4;
anchors.bottom:parent.bottom;
anchors.bottomMargin:4;
source:"ColorPicker.qml";
KeyNavigation.right:blueLoader;
KeyNavigation.tab:blueLoader;
onLoaded:{
item.color="red";
item.focus=true;
}
onFocusChanged:{
item.focus=focus;
}
}
Connections{
target:redLoader.item;
onColorPicked:{
coloredText.color=clr;
if(!redLoader.focus){
redLoader.focus=true;
blueLoader.focus=false;
}
}
}
2、用 ColorPicker 组件的方式与使用 Rectangle 、 Button 、 Text 等标准 Qt Quick 组件完全一致:可以给组件指定唯一的 id ,可以使用锚布局,可以使用 KeyNavigation 附加属性……总之,自定义的组件和 Qt Quick 组件并无本质不同。
functionsetTextColor(clr){
coloredText.color=clr;
}
ColorPicker{
id:redColor;
color:"red";
focus:true;
anchors.left:parent.left;
anchors.leftMargin:4;
anchors.bottom:parent.bottom;
anchors.bottomMargin:4;
KeyNavigation.right:blueColor;
KeyNavigation.tab:blueColor;
onColorPicked:{
coloredText.color=clr;
}
}
动态加载组件
Window{
visible:true
Rectangle{
id:rootItem;
width:360;
height:300;
propertyvarcount:0;
propertyComponentcomponent:null;
Text{
id:coloredText;
text:"HelloWorld!";
anchors.centerIn:parent;
font.pixelSize:24;
}
functionchangeTextColor(clr){
coloredText.color=clr;
}
//它根据颜色值来创建一个颜色选择组件实例
functioncreateColorPicker(clr){
//判断rootItem的component属性如果为null,就调用Qt.createComponent()创建一个ColorPicker组件
if(rootItem.component==null){
rootItem.component=Qt.createComponent("ColorPicker.qml");//动态创建组件
}
varcolorPicker;
//然后调用Component.createObject()创建一个颜色选择组件实例
if(rootItem.component.status==Component.Ready){
/*
createObject()方法有两个参数,第一个参数用来指定创建出来的item的parent,
第二个参数用来传递初始化参数给待创建的item,这些参数以key-value的形式保
存在一个对象中。我在创建颜色组件实例时,传递颜色、x、y三个属性给待创建的
item,于是你看到了,那些色块都在界面顶部
*/
colorPicker=rootItem.component.createObject(rootItem,{"color":clr,"x":rootItem.count*55,"y":10});
//调用colorPicked信号的connect()方法,连接rootItem的changeTextColor方法
colorPicker.colorPicked.connect(rootItem.changeTextColor);//信号连接,用colorPicker的颜色改变Text的颜色
}
rootItem.count++;
}
Button{
id:add;
text:"add";
anchors.left:parent.left;
anchors.leftMargin:4;
anchors.bottom:parent.bottom;
anchors.bottomMargin:4;
onClicked:{
createColorPicker(Qt.rgba(Math.random(),Math.random(),Math.random(),1));
}
}
}
}
运行遇到的问题
ReferenceError: createColorPicker is not defined
解决办法:
Button{
id:add;
text:"add";
anchors.left:parent.left;
anchors.leftMargin:4;
anchors.bottom:parent.bottom;
anchors.bottomMargin:4;
onClicked:{
rootItem.createColorPicker(Qt.rgba(Math.random(),Math.random(),Math.random(),1));
}
}
qrc:/ColorPicker.qml:16:TypeError: Cannot write property of null(可以运行,但是每点击一下按钮就有这个错误)