[Interest] Custom SpinBoxStyle questions

[Frédéric Martinsons]

Well since I had no answer on this thread, I gave up on custom
SpinBoxStyle. For those who are interested, I created a spin box from
scratch (two clickable images and a label, each one with a custom style).
Le 1 sept. 2014 11:04, "Frédéric Martinsons" <frederic.martinsons at sigfox.com>
a écrit :

> 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/20140909/3165a14d/attachment.html>