QML-тип Theme

Определяет свойства, позволяющие оформить пользовательский интерфейс приложения в стиле ОС Аврора. Подробнее…

Строка импорта: import Sailfish.Silica 1.0

Свойства

buttonWidthExtraSmall : real
buttonWidthLarge : real
buttonWidthMedium : real
buttonWidthSmall : real
buttonWidthTiny : real
colorScheme : enumeration
coverSizeHorizontal : size
coverSizeVertical : size
darkPrimaryColor : color
darkSecondaryColor : color
errorColor : color
flickDeceleration : real
fontFamily : string
fontFamilyHeading : string
fontSizeExtraLarge : int
fontSizeExtraLargeBase : int
fontSizeExtraSmall : int
fontSizeExtraSmallBase : int
fontSizeHuge : int
fontSizeHugeBase : int
fontSizeLarge : int
fontSizeLargeBase : int
fontSizeMedium : int
fontSizeMediumBase : int
fontSizeSmall : int
fontSizeSmallBase : int
fontSizeTiny : int
fontSizeTinyBase : int
highlightBackgroundColor : color
highlightBackgroundOpacity : color
highlightColor : color
highlightDimmerColor : color
horizontalPageMargin : real
iconSizeExtraLarge : real
iconSizeExtraSmall : real
iconSizeLarge : real
iconSizeLauncher : real
iconSizeMedium : real
iconSizeSmall : real
iconSizeSmallPlus : real
itemSizeExtraLarge : real
itemSizeExtraSmall : real
itemSizeHuge : real
itemSizeLarge : real
itemSizeMedium : real
itemSizeSmall : real
lightPrimaryColor : color
lightSecondaryColor : color
maximumFlickVelocity : real
opacityFaint : real
opacityHigh : real
opacityLow : real
opacityOverlay : real
overlayBackgroundColor : color
paddingCover : real
paddingLarge : real
paddingMedium : real
paddingSmall : real
pixelRatio : real
primaryColor : color
secondaryColor : color
secondaryHighlightColor : color
startDragDistance : int

Методы

qreal dp(size)
color highlightBackgroundAlternativeFromColor(color, scheme)
color highlightBackgroundFromColor(color, scheme)
color highlightDimmerFromColor(color, scheme)
color highlightFromColor(color, scheme)
highlightText(text, pattern, color)
string iconForMimeType(string mimeType)
color presenceColor(enumeration presenceMode)
color rgba(color, opacity)
color secondaryHighlightFromColor(color, scheme)

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

Объект Theme — это синглтон, всегда существующий в одном экземпляре; тип Theme не допускает создание объектов.

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

Например, Theme.horizontalPageMargin предоставляет стандартный отступ между левым и правым краями страницы и её содержимым. В примере ниже отступ применяется к обеим сторонам метки, поэтому выравнивание происходит не вплотную с краями страницы:

Page {
    Label {
        text: "Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio."
        color: Theme.highlightColor
        x: Theme.horizontalPageMargin
        width: parent.width - x*2   // сделать справа такой же отступ, как слева
        font.pixelSize: Theme.fontSizeSmall
        wrapMode: Text.Wrap
    }
}

Или, если используется простой элемент Text модуля QtQuick, а не Silica Label, то Theme может быть использован для придания Label цвета и шрифта, соответствующих атмосфере:

Text {
    color: Theme.primaryColor
    font.family: Theme.fontFamily
    font.pixelSize: Theme.fontSizeMedium
}

Применение цветовой схемы в стиле ОС Аврора

В ОС Аврора содержимое элементов управления имеет разные цвета. Это сделано для создания визуального отклика при изменении состояния элемента (например, при нажатии кнопки). В компонентах пользовательского интерфейса приложений для ОС Аврора следует применять аналогичную расцветку с помощью объекта Theme.

Применение цветовой схемы к содержимому неинтерактивных элементов

При отображении текста в элементе, который не отвечает на нажатие, к нему применяется цвет Theme.highlightColor или Theme.secondaryHighlightColor для второстепенного текста.

Например:

Page {
    Column {
        x: Theme.horizontalPageMargin
        width: parent.width - x*2   // применить отступ от левого края также к правому краю

        Label {
            text: "Файл: aurora_os_wallpaper.jpg"
            color: Theme.highlightColor     // цвет основного текста
        }
        Label {
            text: "Создано 23-го ноября, 2012"
            color: Theme.secondaryHighlightColor    // цвет второстепенного текста
            font.pixelSize: Theme.fontSizeExtraSmall
        }
    }
}

Применение цветовой схемы к содержимому интерактивных элементов управления

Когда текст отображается в элементе управления, который отвечает на нажатие — например, в таких элементах управления, как ListItem, Button или MouseArea, то к нему применяется цвет Theme.primaryColor, или Theme.secondaryColor для второстепенного текста. Когда элемент управления нажат, то цвет текста изменяется на Theme.highlightColor или Theme.secondaryHighlightColor для второстепенного текста. Кроме того, меняется фон элемента управления — к нему применяется цвет Theme.highlightBackgroundColor с прозрачностью Theme.highlightBackgroundOpacity.

При создании интерактивных элементов пользовательского интерфейса всегда следует использовать BackgroundItem и ListItem, если это возможно, поскольку они имеют свойство highlighted и автоматически подсвечивают фон при нажатии. При изменении стиля элемента при нажатии свойство highlighted будет иметь значение true.

В примере ниже показано применение свойства highlighted для изменения цвета текста внутри элемента управления ListItem:

ListItem {
    id: listItem
    width: parent.width
    contentHeight: Theme.itemSizeMedium

    Column {
        x: Theme.horizontalPageMargin
        width: parent.width - x*2
        anchors.verticalCenter: parent.verticalCenter

        Label {
            text: "File: aurora_os_wallpaper.jpg"
            color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor  // обновить цвет
        }
        Label {
            text: "Создано 23-го ноября, 2012"
            color: listItem.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor  // обновить цвет
            font.pixelSize: Theme.fontSizeExtraSmall
        }
    }

    onClicked: {
        // вызов действия, например, открытие файла
    }
}

При использовании собственных настраиваемых элементов управления MouseArea можно имитировать поведение BackgroundItem и ListItem, применив такие свойства MouseArea pressed и containsMouse. Например, элемент ListItem из предыдущего примера может быть заменен на:

MouseArea {
    id: mouseArea

    property bool highlighted: pressed && containsMouse

    width: parent.width
    height: Theme.itemSizeSmall

    Rectangle {
        anchors.fill: parent
        color: mouseArea.highlighted
               ? Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
               : "transparent"
    }

    // Column { ... }
}

Но такая замена не обеспечит точного повторения поведения BackgroundItem и ListItem, поскольку описанные выше элементы управления имеют небольшую задержку при изменении цвета и другие незначительные отличия. Кроме того, ListItem устанавливает свойство highlighted как true, когда его меню menu открыто. Поэтому всегда следует использовать типы Silica, если есть такая возможность.

Настройка размеров элементов списка и их содержимого

Общий шаблон пользовательского интерфейса приложения представляет собой список элементов, где каждый элемент содержит одну или несколько строк текста и, возможно, сопровождается значком слева. В ОС Аврора приложения должны использовать объект Theme для стандартного определения размеров этих компонентов.

Если элемент списка отображает одну строку текста, то:

высота элемента списка равна Theme.itemSizeSmall;
размер шрифта текста равен Theme.fontSizeMedium;
размер значка равен Theme.iconSizeMedium;
расстояние между значком и текстом равно Theme.paddingLarge.

Если элемент списка отображает две строки текста, то:

высота элемента списка равна Theme.itemSizeMedium;
размер значка равен Theme.iconSizeMedium;
для верхней строки текста используется Theme.fontSizeMedium;
для нижней строки текста используется Theme.fontSizeMedium или меньше и применяются дополнительные цвета. Если длина строки слишком длинная, ее следует сократить с помощью свойства TruncationMode.Fade.
расстояние между значком и текстом равно Theme.paddingLarge.

Ниже приведён пример элемента списка со значком и двумя строками текста:

ListItem {
    id: listItem
    width: parent.width
    contentHeight: Theme.itemSizeMedium

    Image {
        id: icon
        x: Theme.horizontalPageMargin
        source: "file:///path/to/icon.png"
        anchors.verticalCenter: parent.verticalCenter
        sourceSize.width: Theme.iconSizeMedium
        sourceSize.height: Theme.iconSizeMedium
    }

    Column {
        anchors {
            left: icon.right; leftMargin: Theme.paddingLarge
            right: parent.right; rightMargin: Theme.horizontalPageMargin
            verticalCenter: parent.verticalCenter
        }

        Label {
            text: "Важное письмо"
            color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor
        }
        Label {
            text: "Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio."
            color: listItem.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
            font.pixelSize: Theme.fontSizeExtraSmall
            width: parent.width
            truncationMode: TruncationMode.Fade
        }
    }
}

Для элементов, которые отображают более двух строк текста, шаблон такой же: использование более крупных значков и, возможно, размеров шрифта, окрашивание незначительного текста второстепенными цветами, разделение значка и текста с помощью Theme.paddingLarge.

См. также Распространённые ошибки при разработке приложений ОС Аврора.

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

buttonWidthExtraSmall : real

Свойства, содержащие стандартные размеры кнопок:

Theme.buttonWidthTiny — ширина по умолчанию для кнопок с иконками.
Theme.buttonWidthExtraSmall — содержит значение ширины самой маленькой кнопки. На экране с портретной ориентацией могут быть размещены три такие кнопки.
Theme.buttonWidthSmall — содержит значение ширины маленькой кнопки (используется по умолчанию). На экране с портретной ориентацией могут быть размещены две такие кнопки.
Theme.buttonWidthMedium — содержит значение ширины средней кнопки.
Theme.buttonWidthLarge — содержит значение ширины большой кнопки. Как правило, на экране с портретной ориентацией может быть размещена только одна большая кнопка.

См. также Button::preferredWidth.

buttonWidthLarge : real

Свойства, содержащие стандартные размеры кнопок:

Theme.buttonWidthTiny — ширина по умолчанию для кнопок с иконками.
Theme.buttonWidthExtraSmall — содержит значение ширины самой маленькой кнопки. На экране с портретной ориентацией могут быть размещены три такие кнопки.
Theme.buttonWidthSmall — содержит значение ширины маленькой кнопки (используется по умолчанию). На экране с портретной ориентацией могут быть размещены две такие кнопки.
Theme.buttonWidthMedium — содержит значение ширины средней кнопки.
Theme.buttonWidthLarge — содержит значение ширины большой кнопки. Как правило, на экране с портретной ориентацией может быть размещена только одна большая кнопка.

См. также Button::preferredWidth.

buttonWidthMedium : real

Свойства, содержащие стандартные размеры кнопок:

Theme.buttonWidthTiny — ширина по умолчанию для кнопок с иконками.
Theme.buttonWidthExtraSmall — содержит значение ширины самой маленькой кнопки. На экране с портретной ориентацией могут быть размещены три такие кнопки.
Theme.buttonWidthSmall — содержит значение ширины маленькой кнопки (используется по умолчанию). На экране с портретной ориентацией могут быть размещены две такие кнопки.
Theme.buttonWidthMedium — содержит значение ширины средней кнопки.
Theme.buttonWidthLarge — содержит значение ширины большой кнопки. Как правило, на экране с портретной ориентацией может быть размещена только одна большая кнопка.

См. также Button::preferredWidth.

buttonWidthSmall : real

Свойства, содержащие стандартные размеры кнопок:

Theme.buttonWidthTiny — ширина по умолчанию для кнопок с иконками.
Theme.buttonWidthExtraSmall — содержит значение ширины самой маленькой кнопки. На экране с портретной ориентацией могут быть размещены три такие кнопки.
Theme.buttonWidthSmall — содержит значение ширины маленькой кнопки (используется по умолчанию). На экране с портретной ориентацией могут быть размещены две такие кнопки.
Theme.buttonWidthMedium — содержит значение ширины средней кнопки.
Theme.buttonWidthLarge — содержит значение ширины большой кнопки. Как правило, на экране с портретной ориентацией может быть размещена только одна большая кнопка.

См. также Button::preferredWidth.

buttonWidthTiny : real

Свойства, содержащие стандартные размеры кнопок:

Theme.buttonWidthTiny — ширина по умолчанию для кнопок с иконками.
Theme.buttonWidthExtraSmall — содержит значение ширины самой маленькой кнопки. На экране с портретной ориентацией могут быть размещены три такие кнопки.
Theme.buttonWidthSmall — содержит значение ширины маленькой кнопки (используется по умолчанию). На экране с портретной ориентацией могут быть размещены две такие кнопки.
Theme.buttonWidthMedium — содержит значение ширины средней кнопки.
Theme.buttonWidthLarge — содержит значение ширины большой кнопки. Как правило, на экране с портретной ориентацией может быть размещена только одна большая кнопка.

См. также Button::preferredWidth.

colorScheme : enumeration

Цветовая схема. Определяется текущей атмосферой ОС Аврора. Для цветовой схемы DarkOnLight текст и значки раскрашиваются темным цветом на светлом фоне. Для цветовой схемы LightOnDark содержимому подбирается светлые цвета на темном фоне.

Приложения, использующие цвета и значки платформы, адаптируют свой внешний вид под текущую выбранную цветовую схему:

Theme.LightOnDark — стиль атмосферы по умолчанию с тёмным фоновым рисунком и светлым содержимым приложений;
Theme.DarkOnLight — новый стиль: светлый фоновый рисунок с тёмным содержимым приложений.

coverSizeHorizontal : size

Свойства, содержащие стандартные размеры обложки:

Theme.coverSizeVertical — размер обложки приложения в вертикальной ориентации.
Theme.coverSizeHorizontal — размер обложки приложения в горизонтальной ориентации.

coverSizeVertical : size

Свойства, содержащие стандартные размеры обложки:

Theme.coverSizeVertical — размер обложки приложения в вертикальной ориентации.
Theme.coverSizeHorizontal — размер обложки приложения в горизонтальной ориентации.

darkPrimaryColor : color

Основные и вспомогательные цвета определяются текущей атмосферой и подбираются таким образом, чтобы сочетаться с фоновым рисунком атмосферы. Цвета по умолчанию Theme.primaryColor и Theme.secondaryColor не всегда могут быть уместны, если в приложении используется нестандартный фоновый рисунок. Если в приложении используется светлый фоновый рисунок, (например, текстовый документ), рекомендуется использовать цвета Theme.darkPrimaryColor и Theme.darkSecondaryColor. Если в приложении используется тёмный фоновый рисунок, (например, видеопроигрыватель), рекомендуется использовать цвета Theme.lightPrimaryColor и Theme.lightSecondaryColor.

darkSecondaryColor : color

Основные и вспомогательные цвета определяются текущей атмосферой и подбираются таким образом, чтобы сочетаться с фоновым рисунком атмосферы. Цвета по умолчанию Theme.primaryColor и Theme.secondaryColor не всегда могут быть уместны, если в приложении используется нестандартный фоновый рисунок. Если в приложении используется светлый фоновый рисунок, (например, текстовый документ), рекомендуется использовать цвета Theme.darkPrimaryColor и Theme.darkSecondaryColor. Если в приложении используется тёмный фоновый рисунок, (например, видеопроигрыватель), рекомендуется использовать цвета Theme.lightPrimaryColor и Theme.lightSecondaryColor.

errorColor : color

Используется для обозначения ошибок в компонентах.

flickDeceleration : real

Свойства, содержащие параметры прокрутки списков в стиле ОС Аврора, которые не зависят от разрешения экрана. К этим свойствам не следует обращаться напрямую, если приложение использует представления SilicaFlickable, SilicaListView, SilicaGridView или SilicaWebView.

Theme.flickDeceleration — содержит значение, равное замедлению скорости свободной прокрутки списка после завершения жеста;
Theme.maximumFlickVelocity — содержит значение, соответствующее максимальной скорости прокрутки списка.

fontFamily : string

В пользовательском интерфейсе ОС Аврора используются стандартные шрифты:

Theme.fontFamily — шрифт по умолчанию;
Theme.fontFamilyHeading — шрифт для отображения текста заголовка.
Theme.fontFamilyPassword — шрифт с отдельными символами (например, O и 0 или I и l) для паролей.

fontFamilyHeading : string

В пользовательском интерфейсе ОС Аврора используются стандартные шрифты:

Theme.fontFamily — шрифт по умолчанию;
Theme.fontFamilyHeading — шрифт для отображения текста заголовка.
Theme.fontFamilyPassword — шрифт с отдельными символами (например, O и 0 или I и l) для паролей.

fontSizeExtraLarge : int