初学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
}
}
}