QML-тип BackgroundItem

Базовый элемент в стиле ОС Аврора, который отображает нажатие на него при помощи подсветки фона. Подробнее...

Строка импорта: import Sailfish.Silica 1.0
Наследуется от: MouseArea
Наследники: DialogHeader, ListItem, RemorseItem, RemorsePopup и ValueButton

Свойства

Подробное описание

Тип BackgroundItem реализует базовый элемент в стиле ОС Аврора, который отображает нажатие на него при помощи подсветки фона. Данный тип всегда следует использовать при создании интерактивных элементов пользовательского интерфейса. Элементы интерфейса, отвечающие на нажатие, должны использовать по мере возможности BackgroundItem.

Ниже приведен пример простого делегата на базе 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
         }
     }
 }

Следует обратить внимание, что цвет текстовой метки зависит от значения свойства highlighted. Дополнительную информацию об оформлении интерактивных элементов управления в ОС Аврора можно получить в описании типа Theme.

BackgroundItem наследуется от типа QtQuick MouseArea. Поэтому свойства, сигналы и методы MouseArea (например onClicked в примере выше) также доступны для объектов BackgroundItem. Полный список доступных свойств, сигналов и методов приведен в документации MouseArea.

Доступ к дочерним объектам BackgroundItem

Все дочерние элементы BackgroundItem содержатся в объекте contentItem, геометрический размер которого соответствует размеру BackgroundItem. Для определения правильного размера BackgroundItem нельзя использовать свойство childrenRect:

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

Приведенный выше пример без использования свойства childrenRect, например, можно переписать так:

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

Описание свойств

contentHeight : real

Содержит значение высоты объекта contentItem.

contentItem : Item

Содержит объект, который является родителем для дочерних элементов BackgroundItem.

contentWidth : real

Содержит значение ширины объекта contentItem.

down : bool

Истинно, пока элемент BackgroundItem нажат, а положение касания остается в области BackgroundItem.

См. также MouseArea::pressed.

highlighted : bool

Указывает, должно ли содержимое быть выделено другим цветом. Например, при истинном значении свойства highlighted текст, который содержится внутри BackgroundItem, должен быть выделен цветом:

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

Дополнительную информацию об оформлении интерактивных элементов управления в ОС Аврора можно получить в описании типа Theme.

По умолчанию свойство highlighted истинно при истинном значении свойства down.

highlightedColor : color

Содержит цвет элемента, когда значение свойства highlighted истинно.

Значение по умолчанию: полупрозрачный цвет, который содержится в свойстве Theme.highlightBackgroundColor.