盛世清平~Qt quick学习笔记_14_文件加载组件

从文件加载组件

组件代码的文件名称："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（可以运行，但是每点击一下按钮就有这个错误）