BackgroundItem QML Type

A simple Sailfish-styled item for building touch-interactive items More...

• List of all members, including inherited members

Properties

• contentHeight : real
• contentItem : Item
• contentWidth : real
• down : bool
• highlighted : bool
• highlightedColor : color

Detailed Description

The BackgroundItem type provides a Sailfish-styled item with touch interaction. It provides a default item height and press highlighting behavior. Items that respond to pressing/tapping should use BackgroundItem where possible.

Here is a simple delegate based on BackgroundItem:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 SilicaListView {
     anchors.fill: parent
     model: 10
     delegate: BackgroundItem {
         width: ListView.view.width
         contentHeight: Theme.itemSizeSmall

         onClicked: console.log("clicked!")

         Label {
             text: "Click me"
             anchors.centerIn: parent
             color: highlighted ? Theme.highlightColor : Theme.primaryColor
         }
     }
 }

Notice that the label text is colored differently when the item is highlighted. See the Theme documentation for guidelines on styling interactive controls in Sailfish OS.

BackgroundItem inherits the QtQuick MouseArea type, so any properties, signals and methods of MouseArea (such as the onClicked handler in the example above) are also available to BackgroundItem objects. See the MouseArea documentation for its full list of available properties, signals and methods.

Accessing child objects of BackgroundItem

BackgroundItem places its children in a contentItem which is sized to the size of the BackgroundItem. This is generally not noticable, though it does affect the usage of childrenRect, e.g.

 BackgroundItem {
     width: contentItem.childrenRect.width
     height: contentItem.childrenRect.height
     Label {
         text: "Hello"
     }
 }

Note that the above could have been written more efficiently without childrenRect:

 BackgroundItem {
     width: label.width
     height: label.height
     Label {
         id: label
         text: "Hello"
     }
 }

Property Documentation

 BackgroundItem {
     Label {
         text: "Hello"
         color: highlighted ? Theme.highlightColor : Theme.primaryColor
     }
 }