QtQuick学习笔记之QML文件定义组件Component

记录Qtquick 核心编程学习笔记：

文件名称和组件名字一样：ColorPicker.qml文件如下：

import QtQuick 2.5      

Rectangle {      

id:colorPicker;      

width:50;      

height:30;      

signal colorPicked(color clr);      

function configureBorder(){      

colorPicker.border.width = colorPicker.focus ? 2:0;      

colorPicker.border.color = colorPicker.focus ? "#90D750":"#808080";      

}      

MouseArea {      

anchors.fill: parent;      

onClicked: {      

colorPicker.colorPicked(colorPicker.color);      

mouse.accepted = true;      

colorPicker.focus = true;      

}      

Keys.onReturnPressed: {      

colorPicker.colorPicked(colorPicker.color);      

event.accepted = true;      

}      

Keys.onSpacePressed: {      

colorPicker.colorPicked(colorPicker.color);      

event.accepted = true;      

}      

onFocusChanged: {      

configureBorder();      

}      

Component.onCompleted: {      

configureBorder();      

}      

}      

}      

test.qml加载组件 直接用组件名字：（保证在同一个路径下）

import QtQuick 2.5      

import QtQuick.Controls 1.4      

Rectangle{      

width:300;      

height:400;      

id:root;      

color:"green";      

Text {      

id: countShow;      

text: qsTr("倒计时");      

anchors.centerIn: parent;      

color: "blue";      

font.pointSize: 24;      

}      

function setTextColor(clr)      

{      

countShow.color = clr;      

}      

ColorPicker {      

id:redColorPiker;      

color:"red";      

focus:true;      

anchors.left: parent.left;      

anchors.leftMargin: 10;      

anchors.bottom: parent.bottom;      

anchors.bottomMargin: 10;      

onColorPicked: {      

countShow.color = clr;      

}      

}      

ColorPicker {      

id:blueColorPiker;      

color:"blue";      

focus:true;      

anchors.left: redColorPiker.right;      

anchors.leftMargin: 10;      

anchors.bottom: parent.bottom;      

anchors.bottomMargin: 10;      

onColorPicked: {      

countShow.color = clr;      

}      

}      

Component.onCompleted: {      

redColorPiker.colorPicked.connect(setTextColor);      

}      

}      

没有取处理左右tab键