Работа с RosaTheme

Qml-файл предоставляет возможности по установке цвета, шрифта, иконок и размеров в мобильном приложении

Подключение в коде QML

import RosaTheme 1.0 as Rosa 
... 
Label { 
    color: Rosa.Theme.textColor 
}

Работа с константами размеров

Для выставления констант в коде, которые напрямую зависят от разрешения монитора, необходимо использовать Rosa.Theme.scale(48). Для переменных типа size можно воспользоваться Rosa.Theme.scaleSize(100, 48) — это вернёт тип Qt.size.

import RosaTheme 1.0 as Rosa 
... 
Button { 
    height: Rosa.Theme.scale(48) 
}

Работа с цветом

Есть 2 набора переменных с property color:

Набор переменных для тёмной темы property color bgColor: theme.dark ? theme.darkShadesBlackColor : theme.lightShadesWhiteColor. Эти переменные используются с компонентами, где переход на тёмную тему хорошо заметен. Пример: Label { color: Rosa.Theme.textColor }. Здесь при светлой теме текст будет чёрным, а при тёмной — белым.
Набор переменных с прямым указанием цвета readonly property color lightShadesWhiteColor: '#FFFFFFFF'. Этот набор используется там, где нельзя определить цвет из первого набора. Имена цветов соответствуют дизайну в Figma.

Работа со шрифтами

Предоставляется набор переменных для шрифтов, например, property font titleLargeFont. Имена переменных соответствуют дизайну в Figma.

import RosaTheme 1.0 as Rosa 
... 
Label { 
    font: Rosa.Theme.titleLargeFont 
}

Работа с иконками

Каталоги вида 16x16 — это размер иконок. 16x16@2 — это иконки с масштабом x2, который учитывается автоматически через функцию Rosa.Theme.icon().

Раздел other — это иконки нестандартных размеров, например, Rosa.Theme.icon('illustration'). Как видите, здесь префикс other необязателен.

Вся логика по выбору иконки описывается через параметр наименования: Rosa.Theme.icon('16/wifi' + (isDarkTheme ? "" : "-dark")).

helloworld/ 
├── CMakeLists.txt 
└── src/ 
    ├── CMakeLists.txt 
    ├── main.cpp 
    ├── resources.qrc 
    └──  icons/ 
        └── 16x16/ 
            ├── wifi.png 
            └── wifi-dark.png 
        ├── 16x16@2/ 
        ├── 16x16@3/ 
        ├── 24x24/ 
        ├── 24x24@2/ 
        ├── 24x24@3/ 
        ├── other/ 
        ├── other@2/ 
        └── other@3/ 
    ├── icons.qrc 
    └── qml/ 
        └── main.qml

Логика смены иконок для тёмной темы прописана в Theme.qml. Однако для случаев, когда одна и та же иконка работает по-разному в разных приложениях в тёмной теме, есть второй параметр — context. Он формирует уникальный ключ для маппинга именно в своём контексте использования тёмной темы.

app-1 
 
Button { 
    icon.source: Rosa.Theme.icon('24/plus') 
} app-2 
 
Button { 
    icon.source: Rosa.Theme.icon('24/plus', 'flat-button') 
}

В Theme.qml должно быть так:

mapIconsDark: ({ 
    '24/plus' : '24/plus-dark' 
    '24/plus flat-button' : '24/plus' 
})