×
Namespaces

Variants
Actions

Custom Rating Indicator using Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create a custom Rating Indicator using Qt Quick. Note there is also a Symbian Qt Quick Component RatingIndicator Element.

Article Metadata
Code ExampleTested with
Devices(s): N8 (Nokia Belle)
Compatibility
Platform(s): Symbian^3
Symbian
Symbian^3
Platform Security
Signing Required: Self-Signed
Article
Keywords: Rating Indicator
Created: somnathbanik (06 Apr 2012)
Last edited: hamishwillee (11 Oct 2012)
See Also

QML RatingIndicator Element

Introduction

In this article we will see how to create an animated custom Rating Indicator using the QML State and Transition elements.

Custom Rating Indicator

Note.pngNote: This image isn't animated. Try the example to see the indicator at work!

Implementation

Let’s create an empty QML project. We create 5 Images in a Row to align all the Images horizontally. We set the opacity and scale of the Images to 0.4 and 0.5 so that it looks small and faded.

Image {
id: imageStar1
source: "star.png"
opacity: 0.4
scale: 0.5
MouseArea {
anchors.fill: parent
height: parent.height+20
width: parent.width+20
onClicked: {
itemRatingIndicator.rating = 1
}
}
}

On clicking the Images we set a value to the rating parameter and change the State of the Images to opacity and scale to 100%'.

states: [
State {
name: "star"
when: itemRatingIndicator.rating >= 1
PropertyChanges {
target: imageStar1
opacity: 1
scale: 1
}
}
]

To make a smooth change in the State we add Transition with an OutBounce easing effect.

transitions: [
Transition {
NumberAnimation { properties: "opacity,scale"; easing.type: Easing.OutBounce; duration: 1000 }
}
]

Source Code

This page was last modified on 11 October 2012, at 04:20.
85 page views in the last 30 days.
×