При работе с Qt, мощной средой C++ для создания кроссплатформенных приложений, настройка тем значков может изменить внешний вид вашего приложения. В этой статье я рассмотрю систему тем значков Qt и покажу вам, как настраивать значки для разных тем с помощью простого примера кода.
Класс QIcon обеспечивает способ управления и отображения значков в приложениях Qt. Иконки — это графические представления, часто используемые для обозначения действий, элементов или объектов в пользовательском интерфейсе. QIcon::fromTheme работает с темами значков в соответствии со спецификацией темы значков freedesktop. Последнюю версию спецификации значка freedesktop можно получить здесь:
Следующий код C++ можно выполнить, чтобы получить путь поиска, по которому Qt ищет значки:
qDebug() << QIcon::themeSearchPaths();
При выполнении вывод консоли может выглядеть следующим образом:
(":/icons")
Этот вывод показывает, что Qt ищет значки в каталоге icons.
Чтобы продемонстрировать процесс настройки тем значков, давайте рассмотрим пример переключения между светлой и темной темами. Мы будем использовать стиль Fusion, предоставленный Qt, и соответствующим образом изменим цветовую палитру.
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
qDebug() << QIcon::themeSearchPaths();
bool darkMode = false;
if ( darkMode )
{
SetDarkPalette();
QIcon::setThemeName("dark");
}
else
{
SetLightPalette();
QIcon::setThemeName("light");
}
qtcustomtheme_icon w;
w.show();
return a.exec();
}
Код переключается между темным и светлым режимами на основе переменной darkMode, которая инициализируется как false. Возможно, вы захотите изменить это значение на true , если собираетесь запускать в темном режиме. Функции SetDarkPalette() и SetLightPalette() в main.cpp показывают, как установить темную и светлую палитру соответственно. Эти палитры определяют цветовую схему для различных элементов пользовательского интерфейса. В зависимости от выбранной темы будет применена темная или светлая палитра.
void SetDarkPalette()
{
qApp->setStyle(QStyleFactory::create("Fusion"));
QPalette darkPalette;
darkPalette.setColor(QPalette::Window, QColor(53, 53, 53));
darkPalette.setColor(QPalette::WindowText, Qt::white);
darkPalette.setColor(QPalette::Base, QColor(25, 25, 25));
darkPalette.setColor(QPalette::AlternateBase, QColor(53, 53, 53));
darkPalette.setColor(QPalette::Text, Qt::white);
darkPalette.setColor(QPalette::Button, QColor(53, 53, 53));
darkPalette.setColor(QPalette::ButtonText, Qt::white);
darkPalette.setColor(QPalette::BrightText, Qt::red);
qApp->setPalette(darkPalette);
}
void SetLightPalette()
{
qApp->setStyle(QStyleFactory::create("Fusion"));
}
Вот icons directory, где Qt ищет значки для текущей темы. Текущая тема установлена с QIcon::setThemeName(“light”) для светлой темы и QIcon::setThemeName(“dark”) для темной темы.
icons ├── dark │ └── svg │ └── check.svg │ └── png │ └── check.png │ └── cancel.png └── index.theme ├── light │ └── svg │ └── check.svg │ └── png │ └── check.png │ └── cancel.png └── index.theme
Индексные файлы для светлой и темной тем (light.theme и dark.theme) определяют различные аспекты темы. Тема значков — это набор значков, который позволяет приложениям создавать общий вид. Затем вы можете выбрать тему значков, которую хотите использовать, и все приложения будут использовать значки из текущей темы. Иконки и темы ищутся в наборе каталогов. По умолчанию приложения должны искать в каталоге :/icons (см. QIcon::themeSearchPaths()). Вы можете добавить свои собственные каталоги значков в этот список, а также расширить или изменить его. В примере проекта есть каталоги svg и png для каждой темной и светлой темы.
Добавление свойств индекса SVG и PNG для светлой и темной тем в файл индекса следующим образом:
Файл определения индекса светлой темы:
[Icon Theme] Name=light Comment=light theme icons PanelDefault=22 PanelSizes=22 Directories=svg,png [svg] Size=48 Context=Applications MinSize=16 MaxSize=512 Type=Scalable [png] Size=24 Context=Applications MinSize=16 MaxSize=512 Type=Fixed
Файл определения индекса темной темы:
[Icon Theme] Name=dark Comment=dark theme icons PanelDefault=22 PanelSizes=22 Directories=svg,png [svg] Size=48 Context=Applications MinSize=16 MaxSize=512 Type=Scalable [png] Size=24 Context=Applications MinSize=16 MaxSize=512 Type=Fixed
Все значки и индексные файлы тем необходимо добавить в файл ресурсов приложения:
<RCC>
<qresource prefix="/">
<file>icons/dark/index.theme</file>
<file>icons/light/index.theme</file>
<file>icons/light/svg/check.svg</file>
<file>icons/light/png/check.png</file>
<file>icons/light/png/cancel.png</file>
<file>icons/dark/png/check.png</file>
<file>icons/dark/png/cancel.png</file>
<file>icons/dark/svg/check.svg</file>
</qresource>
</RCC>
Откройте Qt Designer и добавьте две кнопки. На изображении ниже показано, как установить значок темы для кнопки OK .
Вы можете установить тему значка программно, используя следующий код:
qtcustomtheme_icon::qtcustomtheme_icon(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
ui.pushButtonOK->setIcon( QIcon::fromTheme("check") );
ui.pushButtonCancel->setIcon( QIcon::fromTheme("cancel") );
}
Когда приложение запускается с включенным темным режимом.
Когда приложение запускается с включенным облегченным режимом.
Вы можете найти полный исходный код этого примера в репозитории Git:
https://github.com/yakupc/articles-and-code/tree/main/qt/qt-custom-theme_icon
