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鍵