Qt Quick 字体颜色改变

本例子为Qt Quick 核心编程中的一个小例子，点击对应颜色方块，字体改变对应颜色：

ColorPicker.qml

import QtQuick 2.0

Rectangle {
    id:colorPicker;
    width: 50;
    height: 30;
    signal colorPicked(color clc);

    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();
    }

}

 component_file.qml

import QtQuick 2.0
import QtQuick.Window 2.12

Window{
    visible: true
    width: 320
    height: 240
    color: "#EEEEEE";

    Text {
        id: coloredText;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 10;
        text: qsTr("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 = "red";
        }
    }

    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);
    }




}

效果也非常的简单，希望大家能够喜欢下去，可以让我们学习到更多的知识。