QML-тип Theme

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

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

Свойства

Методы

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

Объект Theme — это объект-одиночка (singleton), всегда существующий в одном экземпляре; тип 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
     }
 }

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

 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   // aсделать справа такой же отступ, как слева

         Label {
             text: "File: sailfish_os_wallpaper.jpg"
             color: Theme.highlightColor     // цвет основного текста
         }
         Label {
             text: "Created November 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: sailfish_os_wallpaper.jpg"
             color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor  // обновление цвета
         }
         Label {
             text: "Created November 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 открыто. Поэтому всегда следует использовать типы Sailfish.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: "Important email"
             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.buttonWidthExtraSmall — содержит значение ширины самой маленькой кнопки. На экране с портретной ориентацией могут быть размещены три такие кнопки.
  • Theme.buttonWidthSmall — содержит значение ширины маленькой кнопки (используется по умолчанию). На экране с портретной ориентацией могут быть размещены две такие кнопки.
  • Theme.buttonWidthMedium — содержит значение ширины средней кнопки.
  • Theme.buttonWidthLarge — содержит значение ширины большой кнопки. Как правило, на экране с портретной ориентацией может быть размещена только одна большая кнопка.

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

buttonWidthLarge : real

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

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

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

buttonWidthMedium : real

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

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

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

buttonWidthSmall : real

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

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

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

colorScheme : enumeration

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

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

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

coverSizeLarge : QSize

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

  • Theme.coverSizeSmall — содержит размер маленькой обложки приложения;
  • Theme.coverSizeLarge — содержит размер большой обложки приложения.

coverSizeSmall : QSize

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

  • Theme.coverSizeSmall — содержит размер маленькой обложки приложения;
  • Theme.coverSizeLarge — содержит размер большой обложки приложения.

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 — шрифт для отображения текста заголовка.

fontFamilyHeading : string

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

  • Theme.fontFamily — шрифт по умолчанию;
  • Theme.fontFamilyHeading — шрифт для отображения текста заголовка.

fontSizeExtraLarge : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeExtraLargeBase : int

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

fontSizeExtraSmall : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeExtraSmallBase : int

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

fontSizeHuge : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeHugeBase : int

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

fontSizeLarge : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeLargeBase : int

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

fontSizeMedium : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeMediumBase : int

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

fontSizeSmall : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeSmallBase : int

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

fontSizeTiny : int

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

  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта, который используется для отображения второстепенного текста в случаях, когда место под него строго ограничено;
  • Theme.fontSizeExtraSmall — размер шрифта, который используется для более мелкого второстепенного текста (например, для текста описания в TextSwitch и ValueButton);
  • Theme.fontSizeSmall — размер шрифта, который используется для второстепенного текста или для параграфов;
  • Theme.fontSizeMedium — размер шрифта, который является наиболее распространенным размером текста (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
  • Theme.fontSizeLarge — размер шрифта, который можно использовать для стандартных заголовков (например, для заголовков страниц в компонентах PageHeader и ViewPlaceholder);
  • Theme.fontSizeExtraLarge — более крупный размер шрифта для заголовков;
  • Theme.fontSizeHuge — размер шрифта, который используется для самых больших заголовков или для компонентов пользовательского интерфейса, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).

fontSizeTinyBase : int

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

highlightBackgroundColor : color

Свойства, содержащие стандартные цвета для отображения фона выделенного элемента в соответствии с текущей атмосферой ОС Аврора:

  • Theme.highlightBackgroundColor — цвет, который используется для окрашивания фона выделенного текста;
  • Theme.highlightBackgroundOpacity — значение непрозрачности для фона выделенного текста.

Непрозрачность обычно применяется к цвету при помощи метода rgba():

 MouseArea {
     id: mouseArea
     anchors.fill: parent

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

Это позволяет избежать отдельно настройки непрозрачности (свойство opacity) прямоугольника, что было бы проблематичным, если бы прямоугольник имел дочерние элементы, для которых не должна применяться прозрачность.

highlightBackgroundOpacity : color

Свойства, содержащие стандартные цвета для отображения фона выделенного элемента в соответствии с текущей атмосферой ОС Аврора:

  • Theme.highlightBackgroundColor — цвет, который используется для окрашивания фона выделенного текста;
  • Theme.highlightBackgroundOpacity — значение непрозрачности для фона текста, выделенного цветом highlightBackgroundColor.

Непрозрачность обычно применяется к цвету при помощи метода rgba():

 MouseArea {
     id: mouseArea
     anchors.fill: parent

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

Это позволяет избежать отдельно настройки непрозрачности (свойство opacity) прямоугольника, что было бы проблематичным, если бы прямоугольник имел дочерние элементы, для которых не должна применяться прозрачность.

highlightColor : color

Свойства, содержащие стандартные цвета в соответствии с текущей атмосферой ОС Аврора:

  • Theme.primaryColor — цвет, который обычно используется для того, чтобы подчеркнуть активные элементы пользовательского интерфейса;
  • Theme.secondaryColor — цвет, который обычно используется для отрисовки менее значимых частей пользовательского интерфейса;
  • Theme.highlightColor — основной цвет для неинтерактивного текста, а также для подсветки элементов при нажатии на них.
  • Theme.secondaryHighlightColor — второстепенный цвет, используемый для подсвечивания менее значимых элементов пользовательского интерфейса.
  • Theme.highlightDimmerColor — основной цвет с более темным оттенком, который используется в случаях, когда нужно подсветить элемент, но при этом не отвлекать внимание от более значимых элементов.

Второстепенные цвета следует применять для любых текстов и значков, которые по своей сути являются лишь вспомогательными элементами интерфейса и, следовательно, не должны привлекать на себя основное внимание пользователя. Например, текст заполнителя для типа TextField окрашивается цветом Theme.secondaryColor (фон получает аналогичный второстепенный цвет, когда текстовое поле получает фокус).

highlightDimmerColor : color

Свойства, содержащие стандартные цвета в соответствии с текущей атмосферой ОС Аврора:

  • Theme.primaryColor — цвет, который обычно используется для того, чтобы подчеркнуть активные элементы пользовательского интерфейса;
  • Theme.secondaryColor — цвет, который обычно используется для отрисовки менее значимых частей пользовательского интерфейса;
  • Theme.highlightColor — основной цвет для неинтерактивного текста, а также для подсветки элементов при нажатии на них.
  • Theme.secondaryHighlightColor — второстепенный цвет, используемый для подсвечивания менее значимых элементов пользовательского интерфейса.
  • Theme.highlightDimmerColor — основной цвет с более темным оттенком, который используется в случаях, когда нужно подсветить элемент, но при этом не отвлекать внимание от более значимых элементов.

Второстепенные цвета следует применять для любых текстов и значков, которые по своей сути являются лишь вспомогательными элементами интерфейса и, следовательно, не должны привлекать на себя основное внимание пользователя. Например, текст заполнителя для типа TextField окрашивается цветом Theme.secondaryColor (фон получает аналогичный второстепенный цвет, когда текстовое поле получает фокус).

horizontalPageMargin : real

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

  • Theme.paddingSmall — отступ, который равен самому маленькому расстоянию между элементами пользовательского интерфейса (часто используется в случаях, когда место на экране ограничено);
  • Theme.paddingMedium — отступ, который используется для установки расстояния между элементами интерфейса, которые связаны друг с другом по смыслу и поэтому визуально должны быть вместе;
  • Theme.paddingLarge — отступ, который обычно используется для установки расстояния между элементами интерфейса (часто используется в качестве вертикального интервала между компонентами в контейнере типа Column);
  • Theme.horizontalPageMargin — отступ, который используется для установки расстояния между содержимым страницы и левым и правым краями экрана. Обычно это значение равно Theme.paddingLarge на устройствах с маленькими экранами (смартфоны), но может быть шире на устройствах с большими экранами (планшеты).

Отступы от левого и правого краев экрана следует устанавливать равными Theme.horizontalPageMargin.

iconSizeExtraLarge : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeExtraSmall : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeLarge : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeLauncher : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeMedium : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeSmall : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeSmallPlus : real

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

  • Theme.iconSizeExtraSmall — самый маленький размер, который используется, например, для значков в строке состояния;
  • Theme.iconSizeSmall — размер, который используется для маленьких значков, например, для значков CoverAction и значков на экране событий;
  • Theme.iconSizeSmallPlus — чуть больший вариант iconSizeSmall, который используется, например, для значков уведомлений;
  • Theme.iconSizeMedium — самый часто используемый размер (может быть применен, например, для значков внутри маленьких и средних элементов списка);
  • Theme.iconSizeLarge — большой размер, который используется, например, для значков на кнопках;
  • Theme.iconSizeExtraLarge — самый большой размер значков;
  • Theme.iconSizeLauncher — размер, который используется для значков в сетке приложений на домашнем экране.

Значки платформы, к которым осуществляется доступ с помощью синтаксиса "image://theme/icon-[s/m/l]-iconname", также соответствуют размерам значков: маленькие значки начинаются с префикса "icon-s-", средние значки — с префикса "icon-m-" и большие значки — с префикса "icon-l-".

Все монохромные значки должны раскрашиваться аналогичным образом используя те же стили для текста, описанные в разделе Применение цветовой схемы в стиле ОС Аврора. Чтобы раскрасить монохромные значки, в конец URI следует добавить постфикс "?":

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

itemSizeExtraLarge : real

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

  • Theme.itemSizeExtraSmall — размер, который подходит для самых маленьких элементов управления пользовательского интерфейса (используется как высота кнопок и записей в меню);
  • Theme.itemSizeSmall — размер, который подходит для небольших элементов управления пользовательского интерфейса (используется как высота элементов списка с одной строкой текста);
  • Theme.itemSizeMedium — размер, который подходит для средних размеров элементов управления пользовательского интерфейса (используется как высота элементов списка с двумя строками текста);
  • Theme.itemSizeLarge — размер, который подходит для элементов управления с несколькими строками текста или с более заметным текстом (используется, например, в качестве высоты стандартного элемента заголовка страницы в книжной ориентации);
  • Theme.itemSizeExtraLarge — размер, который подходит для более крупных элементов управления, таких как делегаты списка с миниатюрой изображения и связанной информацией об этом изображении;
  • Theme.itemSizeHuge — размер, который подходит для более крупных элементов управления, таких как миниатюры изображений, расположенные в виде сетке во всю ширину экрана.

itemSizeExtraSmall : real

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

  • Theme.itemSizeExtraSmall — размер, который подходит для самых маленьких элементов управления пользовательского интерфейса (используется как высота кнопок и записей в меню);
  • Theme.itemSizeSmall — размер, который подходит для небольших элементов управления пользовательского интерфейса (используется как высота элементов списка с одной строкой текста);
  • Theme.itemSizeMedium — размер, который подходит для средних размеров элементов управления пользовательского интерфейса (используется как высота элементов списка с двумя строками текста);
  • Theme.itemSizeLarge — размер, который подходит для элементов управления с несколькими строками текста или с более заметным текстом (используется, например, в качестве высоты стандартного элемента заголовка страницы в книжной ориентации);
  • Theme.itemSizeExtraLarge — размер, который подходит для более крупных элементов управления, таких как делегаты списка с миниатюрой изображения и связанной информацией об этом изображении;
  • Theme.itemSizeHuge — размер, который подходит для более крупных элементов управления, таких как миниатюры изображений, расположенные в виде сетке во всю ширину экрана.

itemSizeHuge : real

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

  • Theme.itemSizeExtraSmall — размер, который подходит для самых маленьких элементов управления пользовательского интерфейса (используется как высота кнопок и записей в меню);
  • Theme.itemSizeSmall — размер, который подходит для небольших элементов управления пользовательского интерфейса (используется как высота элементов списка с одной строкой текста);
  • Theme.itemSizeMedium — размер, который подходит для средних размеров элементов управления пользовательского интерфейса (используется как высота элементов списка с двумя строками текста);
  • Theme.itemSizeLarge — размер, который подходит для элементов управления с несколькими строками текста или с более заметным текстом (используется, например, в качестве высоты стандартного элемента заголовка страницы в книжной ориентации);
  • Theme.itemSizeExtraLarge — размер, который подходит для более крупных элементов управления, таких как делегаты списка с миниатюрой изображения и связанной информацией об этом изображении;
  • Theme.itemSizeHuge — размер, который подходит для более крупных элементов управления, таких как миниатюры изображений, расположенные в виде сетке во всю ширину экрана.

itemSizeLarge : real

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

  • Theme.itemSizeExtraSmall — размер, который подходит для самых маленьких элементов управления пользовательского интерфейса (используется как высота кнопок и записей в меню);
  • Theme.itemSizeSmall — размер, который подходит для небольших элементов управления пользовательского интерфейса (используется как высота элементов списка с одной строкой текста);
  • Theme.itemSizeMedium — размер, который подходит для средних размеров элементов управления пользовательского интерфейса (используется как высота элементов списка с двумя строками текста);
  • Theme.itemSizeLarge — размер, который подходит для элементов управления с несколькими строками текста или с более заметным текстом (используется, например, в качестве высоты стандартного элемента заголовка страницы в книжной ориентации);
  • Theme.itemSizeExtraLarge — размер, который подходит для более крупных элементов управления, таких как делегаты списка с миниатюрой изображения и связанной информацией об этом изображении;
  • Theme.itemSizeHuge — размер, который подходит для более крупных элементов управления, таких как миниатюры изображений, расположенные в виде сетке во всю ширину экрана.

itemSizeMedium : real

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

  • Theme.itemSizeExtraSmall — размер, который подходит для самых маленьких элементов управления пользовательского интерфейса (используется как высота кнопок и записей в меню);
  • Theme.itemSizeSmall — размер, который подходит для небольших элементов управления пользовательского интерфейса (используется как высота элементов списка с одной строкой текста);
  • Theme.itemSizeMedium — размер, который подходит для средних размеров элементов управления пользовательского интерфейса (используется как высота элементов списка с двумя строками текста);
  • Theme.itemSizeLarge — размер, который подходит для элементов управления с несколькими строками текста или с более заметным текстом (используется, например, в качестве высоты стандартного элемента заголовка страницы в книжной ориентации);
  • Theme.itemSizeExtraLarge — размер, который подходит для более крупных элементов управления, таких как делегаты списка с миниатюрой изображения и связанной информацией об этом изображении;
  • Theme.itemSizeHuge — размер, который подходит для более крупных элементов управления, таких как миниатюры изображений, расположенные в виде сетке во всю ширину экрана.

itemSizeSmall : real

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

  • Theme.itemSizeExtraSmall — размер, который подходит для самых маленьких элементов управления пользовательского интерфейса (используется как высота кнопок и записей в меню);
  • Theme.itemSizeSmall — размер, который подходит для небольших элементов управления пользовательского интерфейса (используется как высота элементов списка с одной строкой текста);
  • Theme.itemSizeMedium — размер, который подходит для средних размеров элементов управления пользовательского интерфейса (используется как высота элементов списка с двумя строками текста);
  • Theme.itemSizeLarge — размер, который подходит для элементов управления с несколькими строками текста или с более заметным текстом (используется, например, в качестве высоты стандартного элемента заголовка страницы в книжной ориентации);
  • Theme.itemSizeExtraLarge — размер, который подходит для более крупных элементов управления, таких как делегаты списка с миниатюрой изображения и связанной информацией об этом изображении;
  • Theme.itemSizeHuge — размер, который подходит для более крупных элементов управления, таких как миниатюры изображений, расположенные в виде сетке во всю ширину экрана.

lightPrimaryColor : color

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

lightSecondaryColor : color

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

maximumFlickVelocity : real

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

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

overlayBackgroundColor : color

Цвет фона системных диалогов, открываемых поверх приложения.

paddingLarge : real

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

  • Theme.paddingSmall — отступ, который равен самому маленькому расстоянию между элементами пользовательского интерфейса (часто используется в случаях, когда место на экране ограничено);
  • Theme.paddingMedium — отступ, который используется для установки расстояния между элементами интерфейса, которые связаны друг с другом по смыслу и поэтому визуально должны быть вместе;
  • Theme.paddingLarge — отступ, который обычно используется для установки расстояния между элементами интерфейса (часто используется в качестве вертикального интервала между компонентами в контейнере типа Column);
  • Theme.horizontalPageMargin — отступ, который используется для установки расстояния между содержимым страницы и левым и правым краями экрана. Обычно это значение равно Theme.paddingLarge на устройствах с маленькими экранами (смартфоны), но может быть шире на устройствах с большими экранами (планшеты).

Отступы от левого и правого краев экрана следует устанавливать равными Theme.horizontalPageMargin.

paddingMedium : real

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

  • Theme.paddingSmall — отступ, который равен самому маленькому расстоянию между элементами пользовательского интерфейса (часто используется в случаях, когда место на экране ограничено);
  • Theme.paddingMedium — отступ, который используется для установки расстояния между элементами интерфейса, которые связаны друг с другом по смыслу и поэтому визуально должны быть вместе;
  • Theme.paddingLarge — отступ, который обычно используется для установки расстояния между элементами интерфейса (часто используется в качестве вертикального интервала между компонентами в контейнере типа Column);
  • Theme.horizontalPageMargin — отступ, который используется для установки расстояния между содержимым страницы и левым и правым краями экрана. Обычно это значение равно Theme.paddingLarge на устройствах с маленькими экранами (смартфоны), но может быть шире на устройствах с большими экранами (планшеты).

Отступы от левого и правого краев экрана следует устанавливать равными Theme.horizontalPageMargin.

paddingSmall : real

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

  • Theme.paddingSmall — отступ, который равен самому маленькому расстоянию между элементами пользовательского интерфейса (часто используется в случаях, когда место на экране ограничено);
  • Theme.paddingMedium — отступ, который используется для установки расстояния между элементами интерфейса, которые связаны друг с другом по смыслу и поэтому визуально должны быть вместе;
  • Theme.paddingLarge — отступ, который обычно используется для установки расстояния между элементами интерфейса (часто используется в качестве вертикального интервала между компонентами в контейнере типа Column);
  • Theme.horizontalPageMargin — отступ, который используется для установки расстояния между содержимым страницы и левым и правым краями экрана. Обычно это значение равно Theme.paddingLarge на устройствах с маленькими экранами (смартфоны), но может быть шире на устройствах с большими экранами (планшеты).

Отступы от левого и правого краев экрана следует устанавливать равными Theme.horizontalPageMargin.

pixelRatio : real

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

primaryColor : color

Свойства, содержащие стандартные цвета в соответствии с текущей атмосферой ОС Аврора:

  • Theme.primaryColor — цвет, который обычно используется для того, чтобы подчеркнуть активные элементы пользовательского интерфейса;
  • Theme.secondaryColor — цвет, который обычно используется для отрисовки менее значимых частей пользовательского интерфейса;
  • Theme.highlightColor — основной цвет для неинтерактивного текста, а также для подсветки элементов при нажатии на них.
  • Theme.secondaryHighlightColor — второстепенный цвет, используемый для подсвечивания менее значимых элементов пользовательского интерфейса.
  • Theme.highlightDimmerColor — основной цвет с более темным оттенком, который используется в случаях, когда нужно подсветить элемент, но при этом не отвлекать внимание от более значимых элементов.

Второстепенные цвета следует применять для любых текстов и значков, которые по своей сути являются лишь вспомогательными элементами интерфейса и, следовательно, не должны привлекать на себя основное внимание пользователя. Например, текст заполнителя для типа TextField окрашивается цветом Theme.secondaryColor (фон получает аналогичный второстепенный цвет, когда текстовое поле получает фокус).

secondaryColor : color

Свойства, содержащие стандартные цвета в соответствии с текущей атмосферой ОС Аврора:

  • Theme.primaryColor — цвет, который обычно используется для того, чтобы подчеркнуть активные элементы пользовательского интерфейса;
  • Theme.secondaryColor — цвет, который обычно используется для отрисовки менее значимых частей пользовательского интерфейса;
  • Theme.highlightColor — основной цвет для неинтерактивного текста, а также для подсветки элементов при нажатии на них.
  • Theme.secondaryHighlightColor — второстепенный цвет, используемый для подсвечивания менее значимых элементов пользовательского интерфейса.
  • Theme.highlightDimmerColor — основной цвет с более темным оттенком, который используется в случаях, когда нужно подсветить элемент, но при этом не отвлекать внимание от более значимых элементов.

Второстепенные цвета следует применять для любых текстов и значков, которые по своей сути являются лишь вспомогательными элементами интерфейса и, следовательно, не должны привлекать на себя основное внимание пользователя. Например, текст заполнителя для типа TextField окрашивается цветом Theme.secondaryColor (фон получает аналогичный второстепенный цвет, когда текстовое поле получает фокус).

secondaryHighlightColor : color

Свойства, содержащие стандартные цвета в соответствии с текущей атмосферой ОС Аврора:

  • Theme.primaryColor — цвет, который обычно используется для того, чтобы подчеркнуть активные элементы пользовательского интерфейса;
  • Theme.secondaryColor — цвет, который обычно используется для отрисовки менее значимых частей пользовательского интерфейса;
  • Theme.highlightColor — основной цвет для неинтерактивного текста, а также для подсветки элементов при нажатии на них.
  • Theme.secondaryHighlightColor — второстепенный цвет, используемый для подсвечивания менее значимых элементов пользовательского интерфейса.
  • Theme.highlightDimmerColor — основной цвет с более темным оттенком, который используется в случаях, когда нужно подсветить элемент, но при этом не отвлекать внимание от более значимых элементов.

Второстепенные цвета следует применять для любых текстов и значков, которые по своей сути являются лишь вспомогательными элементами интерфейса и, следовательно, не должны привлекать на себя основное внимание пользователя. Например, текст заполнителя для типа TextField окрашивается цветом Theme.secondaryColor (фон получает аналогичный второстепенный цвет, когда текстовое поле получает фокус).

startDragDistance : int

Содержит значение, которое соответствует расстоянию от момента прикосновения до того, как жест будет распознан как перетаскивание.

Описание методов

color highlightBackgroundFromColor(color, scheme)

Возвращает цвет подсветки фона, полученный из базисного цвета (параметр color) и цветовой схемы (параметр scheme).

color highlightDimmerFromColor(color, scheme)

Возвращает цвет подсветки с более темным оттенком, полученный из базисного цвета (параметр color) и цветовой схемы (параметр scheme).

color highlightFromColor(color, scheme)

Возвращает цвет подсветки, полученный из базисного цвета (параметр color) и цветовой схемы (параметр scheme).

highlightText(text, pattern, color)

Выполняет поиск по паттерну pattern (обычная строка или регулярное выражение) в тексте text и устанавливает всем найденным вхождениям цвет color.

Возвращает HTML-строку, в которой найденные совпадения выделены цветом, а исходный текст экранирован (метасимволы <, >, &, и " заменены их HTML-сущностями).

string iconForMimeType(string mimeType)

Возвращает URI значка для MIME-типа, указанного в параметре mimeType.

 Image {
     source: Theme.iconForMimeType("text/vcard")
 }

URI значка может быть комбинацией из префикса "image://theme/icon-m-file-" и одного из следующих идентификаторов:

  • apk
  • audio
  • formatted
  • image
  • note
  • pdf
  • other
  • presentation
  • rpm
  • spreadsheet
  • vcard
  • video
  • folder

Если подходящий URI значка не найден, то возвращается "image://theme/icon-m-file-other".

color presenceColor(enumeration presenceMode)

Возвращает цвет присутствия по заданному значению presenceMode (режима присутствия).

Параметр presenceMode может принимать одно из значений:

  • Theme.PresenceAvailable — цвет статуса "Доступен";
  • Theme.PresenceAway — цвет статуса "Отошел";
  • Theme.PresenceBusy — цвет статуса "Занят";
  • Theme.PresenceOffline — цвет статуса "Вне сети";

color rgba(color, opacity)

Применяет к цвету color значение непрозрачности opacity (от 0.0 до 1.0) и возвращает полученный в результате цвет.

color secondaryHighlightFromColor(color, scheme)

Возвращает второстепенный цвет подсветки, полученный из базисного цвета (параметр color) и цветовой схемы (параметр scheme).