Qml练习：颜色选择器

实现效果

单击下面小颜色块，改变上方大矩形填充色

效果如图

代码：

ColorPicker.qml

import QtQuick 2.0

Rectangle {
    width: 60
    height: width
    border.width: focus?3:0
    border.color: "white"
    signal colorChecked(color msg)
    MouseArea{
        id:m
        anchors.fill: parent
        onClicked:colorChecked(color);
    }
}

main.qml

import QtQuick 2.0
import QtQuick.Window 2.0

Rectangle{
    id:root
    width: 400
    height: 400
    color: "#2e2e2e"
    Rectangle{
        id:main
        height: 300
        width: height
        border.width: 2
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 10

    }
    Row{
        anchors{
            bottom: parent.bottom
            bottomMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
        spacing: 15
        ColorPicker{
            id:red
            color:"red"
            onColorChecked: {
                main.color = msg;
                focus=true;
            }
        }
        ColorPicker{
            id:green
            color:"green"
            onColorChecked: {
                main.color = msg;
                focus=true;
            }
        }

        ColorPicker{
            id:blue
            color:"blue"
            onColorChecked:{main.color = msg;focus =true;}
        }
    }
}