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键