Qt Creator Documentation 2.8.0

Contents

QML AnimatedSwitch Element

An animated switch that has two states on and off. More...

Properties

Detailed Description

The animated switch type provides a switch button with image animation. The control can be created using 2 or 3 images.

Here is a simple animated switch using 2 images:

 import QtQuick 1.1
 import "components"

 AnimatedSwitch {
     id: animatedswitch1
     width: 130
     height: 56
     on: false
     imageOn: ""
     textOffX: 78
     sliderImage: "images/knob.svg"
     textOnX: 18
     imageOff: "images/background.svg"
     sliderImageY: 2
     imageOffHeight: 56
     imageOffWidth: 130
     textColor: "#ffffff"
     font.family: "Arial"
     font.bold: false
     sliderImageOffX: 78
     textOn: "On"
     sliderImageOnX: 1
     font.pixelSize: 22
     textOff: "Off"

     onOnChanged: {
         console.debug(on);
     }
 }

Here is a simple animated switch using 3 images:

 import QtQuick 1.1
 import "components"

 AnimatedSwitch{
     id: animatedswitch2
     width: 100;
     height: 27;
     on: true
     imageOff: "images/off.png"
     imageOffWidth: 100
     imageOffHeight: 27
     sliderImage: "images/slider.png"
     imageOn: "images/on.png"
     imageOnWidth: 100
     imageOnHeight: 27
     sliderImageOnX: 0
     sliderImageY: 0
     sliderImageOffX: 62
     textOnX: 18
     textOffX: 54
     textColor: "#000000"

     onOnChanged: {
         console.debug(on);
     }

 }

Property Documentation

font : font

The font properties of the text.


imageOff : url

The source image for the off state.


imageOn : url

The source image for the on state. This can be left blank if a slider image is used.


on : bool

Determines if the switch is on or off.


sliderImage : url

The source image for the animated slider image.


sliderImageOffX : int

The horizontal x position of the slider image when the switch is in the off state.


sliderImageOnX : int

The horizontal x position of the slider image when the switch is in on state.


sliderImageY : int

The vertical y position of the slider image in relation to the imageOff source.


textColor : color

The color of the text.


textOff : string

The text to display when the switch is in the off state.


textOffX : int

The horizontal position where we will position the text when the switch is in the off state.


textOn : string

The text to display when the switch is in the on state.


textOnX : int

The horizontal position where we will position the text when the switch is in the on state.


width : int

The width of the animated switch, usually the width of the background image.