[Interest] Custom SpinBoxStyle questions

[Frédéric Martinsons]

Hello interest,

I've been doing a custom QML SpinBox (dedicated to look like the android
SpinBox, up arrow above the text, down arrow below and no background) but I
have trouble concerning the style component 'incrementControl' and
'decrementControl'.

The documentation says : "The button used to increment/decrement the value"
, but I did not manage to control the value via my custom mouse area (I try
propagateComposedEvents and accepted=false but without success). Moreover
the mouses area of the SpinBox seems existing alongside (but not at the
same place) my custom one and still be reactive.

I try also to completely remove my mouse area but the spin boxes one didn't
seem to be attached to my Image inside incrementControl or decrementControl.

Have you ever tried to made a custom spin box style ? And if yes how did
you do ? Any help would be greatly appreciated.

Here is a my sample code:

SpinBox {
        id: spinBox
        anchors.centerIn: parent
        implicitWidth: 50
        implicitHeight: 50
        value: 0
        style: spinBoxStyle
        onValueChanged: console.log("Value is now: "+ value)
}
Component {
        id: spinBoxStyle
        SpinBoxStyle {
            background: Rectangle {
                id: bg
                visible: false
                implicitWidth: control.width
                implicitHeight: control.height
            }
            decrementControl: Item {
                implicitWidth: 50
                implicitHeight: 50
                anchors.top: parent.bottom
                Image {
                    id: downArrow
                    source: "down-arrow.png"
                    sourceSize.width: parent.width
                    sourceSize.height: parent.height
                    anchors.centerIn: parent
                    opacity: control.value==control.minimumValue ? 0.5 : 1
                }
                MouseArea {
                    id: mouse
                    anchors.fill:parent
                }
                Rectangle {
                    color: "#11ffffff"
                    anchors.fill: parent
                    visible: mouse.pressed
                }
            }
            incrementControl: Item {
                implicitWidth: 50
                implicitHeight: 50
                Image {
                    id: upArrow
                    source: "up-arrow.png"
                    sourceSize.width: parent.width
                    sourceSize.height: parent.height
                    anchors.centerIn:parent
                    opacity: control.value==control.maximumValue ? 0.5 : 1
                }
                MouseArea {
                    id: mouse
                    anchors.fill:parent
                }
                Rectangle {
                    color: "#11ffffff"
                    anchors.fill: parent
                    visible: mouse.pressed
                }
            }
        }
    }
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20140901/144fcf06/attachment.html>