用QML实现一个调色程序

初学QML， 简单的写了一个调色程序，下面是界面效果。

 

调色组件 RgbElement.qml

 import QtQuick 2.0

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

Row

{

    property  int rgbType: 0

    property int  rgbValue: 0

    property bool blSliderUpdate: false

    spacing: 10

    height: 20

    function getNormalizedValue(){

        return rgbValue/255.0

    }

    function getRgbParam(theType){

        if(rgbType === 0)

        {

            return ["R","red"]

        }

        else if(rgbType ===1)

        {

            return ["G","green"]

        }

        else if(rgbType ===2)

        {

            return ["B","blue"]

        }

        else if(rgbType ===3)

        {

            return ["A","black"]

        }

        return ["R","red"]

    }

    Text{

        width: 30

        height: parent.height

        id:rgbName

        text:getRgbParam(rgbType)[0]

        color:getRgbParam(rgbType)[1]

        font.bold: true

        font.pixelSize: 12

        horizontalAlignment:Text.AlignHCenter

        verticalAlignment: Text.AlignVCenter

    }

    Rectangle{

//        anchors.horizontalCenter: parent.horizontalCenter

        width: 30

        height: parent.height

        radius: 3

        border.color:rgbName.color

        border.width: 3

        TextInput{

            anchors.centerIn: parent

//            anchors.margins: 5

            id:rgbInput

            selectionColor: "blue"

            selectByMouse: true

            onTextChanged: {

                if(!blSliderUpdate)

                {

                    rgbSlider.value= Number(rgbInput.text)

                    console.log("Text_Text: ",rgbInput.text);

                }

            }

            Component.onCompleted: {

                text=rgbValue

            }

            validator: IntValidator{bottom: 0;top:255}

        }

    }

    Slider{

        id:rgbSlider

        width: 60

        height: parent.height

        minimumValue: 0

        maximumValue: 255

        onValueChanged: {

            blSliderUpdate = true;

            rgbValue = Math.round(value)

            rgbInput.text =rgbValue

            console.log("Text_Slider: ",rgbInput.text);

            blSliderUpdate = false;

        }

        function getSplitRate()

        {

            var percetange=(value-minimumValue)/(maximumValue-minimumValue)

            return [percetange,1-percetange]

        }

        style: SliderStyle {

                tickmarks:Rectangle{

                    implicitWidth: 200

                    implicitHeight: 8

                    color: rgbName.color

                    radius: 8

                }

                groove:

                    Row{

                    Rectangle {

                    implicitWidth: 60*rgbSlider.getSplitRate()[0]

                    implicitHeight: 8

                    color: rgbName.color

                    radius: 8

                    }

                    Rectangle {

                    implicitWidth: 60*rgbSlider.getSplitRate()[1]/**(Slider.maximumValue-Slider.value)/(Slider.maximumValue-Slider.minimumValue)*/

                    implicitHeight: 8

                    color: "gray"

                    radius: 8

                    }

                }

                handle: Rectangle {

                    anchors.centerIn: parent

                    color: rgbName.color

                    border.color: "gray"

                    border.width: 2

                    implicitWidth: 10

                    implicitHeight: rgbSlider.height-5

                    radius: 12

                }

            }

        Component.objectName: {

            blSliderUpdate=false;

            value=rgbValue

        }

    }

}

 

main.qml

import QtQuick2.2

import QtQuick.Window 2.1

Window {

    visible: true

    width: 360

    height: 360

    Row

    {

        anchors.centerIn: parent

        spacing: 20

        Column

        {

            id:rgbCtrls

            anchors.bottom:temp.top

            RgbElement{

                id:colorR

                rgbType: 0

            }

            RgbElement{

                id:colorG

                rgbType: 1

            }

            RgbElement{

                id:colorB

                rgbType: 2

            }

            RgbElement{

                id:colorA

                rgbType: 3

                rgbValue: 255

            }

        }

        Rectangle{

            id:colorShowPanel

            color:Qt.rgba(colorR.getNormalizedValue(),colorG.getNormalizedValue(),colorB.getNormalizedValue(),colorA.getNormalizedValue())

            height:rgbCtrls.height

            width: height

            radius: 5

        }

    }

}