Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Pulsating Cursor with QML

From Wiki
Jump to: navigation, search
Article Metadata
Created: axeljaeger (30 Nov 2010)
Last edited: hamishwillee (24 Jul 2012)

Everyone nowadays wants animated user interfaces. Why not provide an upgrade to one of the oldest animations in user interfaces: The blinking text cursor!

Qt Quick's Text Input allows setting an arbitrary component as cursor by setting the cursorDelegate property. The only thing missing is a suitable cursor component. In this example, we just use a small rectangle with an animation:

    Component {
id: cursor
Rectangle {
id: cursor_rect
width: 1
height: 20
color: "black"
PropertyAnimation on opacity {
easing.type: Easing.OutSine
loops: Animation.Infinite
from: 0
to: 1.0
duration: 1000

Because a screenshot would be rather boring, just download the whole example: File:Pulsatingcursor.txt. You will have to rename to file to have qml as extension because the wiki does not allow to upload qml files.

This page was last modified on 24 July 2012, at 02:15.
89 page views in the last 30 days.