Qt Reference Documentation

Using Inverted Style with Symbian Components

Inverted style is not a direct inversion of the default style but rather an alternative one. For many components the text and graphics colors used in inverted style differ greatly from the default ones. However, for some components the inverted visualization makes only a little or no difference at all. You may decide to invert either some or all of the components in your application.

Each component that supports the inverted style has the boolean platformInverted property that by default is set to false. The following code snippet illustrates specifying the inverted style for a Button and its background Window:

 Window {
     platformInverted: true

     Button {
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.margins: platformStyle.paddingMedium
         text: "Push me"
         platformInverted: true
     }
 }

The following picture illustrates different style combinations for a Button and a Window. The last combination corresponds to the code snippet above.

In addition to the components having the platformInverted property, the Style element provides an inverted counterpart for each specified color parameter. These colors help you to create custom QML elements consistent with the Symbian platform style. As an example, the Label component internally determines its text color as follows:

 color: platformInverted ? platformStyle.colorNormalLightInverted
                         : platformStyle.colorNormalLight

Using Inverted Style in Applications

Component's platformInverted value is not automatically propagated to its children that you create in your code. You need to set platformInverted to true explicitly for each component that you want to appear with the inverted style.

Bear in mind that some components do not have the platformInverted property in their API. It is declared only in components that actually have some visual content to be altered. For example, ButtonRow does not have platformInverted property whereas the Button items in the ButtonRow have. It is intended but not enforced that components forming a compound unit such as ButtonRow have a uniform platformInverted value for visual clarity.

The code snippet below illustrates the use of inverted style with a ButtonRow:

 ButtonRow {
     id: buttonRow
     anchors { left: parent.left; right: parent.right; top: parent.top; margins: platformStyle.paddingMedium }

     Button { text: "Button 1"; platformInverted: true }
     Button { text: "Button 2"; platformInverted: true }
     Button { text: "Button 3"; platformInverted: true }
 }

The screenshot below illustrates the result of the code snippet.

Some components, such as CheckBox or ToolButton, do not have a own solid frame or background. Use a matching background color or platformInverted value with those components to ensure a feasible appearance.

The code snippet below illustrates a ToolButton that is placed on a ToolBar. They both should use the same style since the ToolBar provides a background for the ToolButton. Notice that ToolBarLayout does not have the platformInverted property since it is only a container for handling layout of its visual content, that is, one or more ToolButton items.

 Button {
     id: toggleInvertButton
     anchors { left: parent.left; right: parent.right; top: buttonRow.bottom; margins: platformStyle.paddingMedium }
     text: "Set " + (toolBar.platformInverted ? "normal" : "inverted") + " style for ToolBar"

     onClicked: {
         toolBar.platformInverted = !toolBar.platformInverted
     }
 }

 ToolBar {
     id: toolBar

     anchors.bottom: parent.bottom
     tools: ToolBarLayout {
         ToolButton {
             iconSource: "toolbar-back"
             platformInverted: toolBar.platformInverted
             onClicked: Qt.quit()
         }
     }
 }

In the following images, the first two ToolBars show a case where the ToolButton style obeys its parent's style like in the code snippet above. The latter two ToolBars represent a case where the ToolButton style differs from its parent causing an inadvisable appearance.