Custom Rating Indicator using Qt Quick

Comments

(no comments yet)

Log in or Join to leave comments.

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 Example

Source file: Media: RatingIndicatorQML.zip

Installation file: Media: RatingIndicatorQML.sis

---

Tested with

SDK: Qt SDK 1.2

Devices(s): N8 (Nokia Belle)

---

Compatibility

Platform(s): 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: 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

• The full source code of the example is available here: File:RatingIndicatorQML.zip