import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 320;
height: 240;
color: "#EEEEEE";
Text {
id: coloredText;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.top: parent.top;
anchors.topMargin: 4;
text: "Hello World!";
font.pixelSize: 32;
}
function setTextColor(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;
}
}
ColorPicker {
id: blueColor;
color: "blue";
anchors.left: redColor.right;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
KeyNavigation.left: redColor;
KeyNavigation.right: pinkColor;
KeyNavigation.tab: pinkColor;
}
ColorPicker {
id: pinkColor;
color: "pink";
anchors.left: blueColor.right;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
KeyNavigation.left: blueColor;
KeyNavigation.tab: redColor;
}
Component.onCompleted:{
blueColor.colorPicked.connect(setTextColor);
pinkColor.colorPicked.connect(setTextColor);
}
}
可以看到, component_file.qml 使用 ColorPicker 组件的方式与使用 Rectangle 、 Button 、 Text 等标准 Qt Quick 组
件完全一致:可以给组件指定唯一的 id ,可以使用锚布局,可以使用 KeyNavigation 附加属性……总之,自定义的组
件和 Qt Quick 组件并无本质不同。不过需要注意的是,组件实例的 id 和组成组件的顶层 item 的 id 是各自独立的,以
上面的例子来看, redColor 和 colorPicker 是两个不同的 id ,前者指代组件对象(虽然组件的定义没有使用
Component ),后者指代 ColorPicker 的 Rectangle 对象。
上面的代码还演示两种使用 qml 自定义信号的方式, redColor 使用信号处理器, greeColor 和 pinkColor 则使用了
signal 对象的 connect() 方法连接到 setTextColor() 方法上。
我把 ColorPicker.qml 和 component_file.qml 放在同一个文件下面,否则可能会报错。图 1 是运行 "qmlscene
component_file.qml" 命令 的效果: