Разработка приложения с помощью Qt
Я должен реализовать графический дизайн пользовательского интерфейса. Основой выбора является Qt.
После некоторой работы по реализации возникли некоторые трудности и вопросы. Суть в том, что есть несколько причудливых элементов дизайна с градиентами, 3D-эффектами, тенями и так далее.
Используемый в настоящее время подход, который мне действительно не очень нравится, заключается в использовании растровых изображений из графического дизайна в качестве фона для различных виджетов. Это имеет некоторые очень неприятные недостатки в зависимости от расположения элементов и масштабируемости. Этот подход генерирует довольно статичный пользовательский интерфейс, который трудно поддерживать и адаптировать.
Я был бы признателен за динамическую генерацию всех графических элементов во время выполнения, используя как можно больше инструментов по умолчанию из Qt. Но я просто не знаю, как реализовать такие сложные визуальные эффекты. В качестве примера вы можете взять следующее изображение.
Вопрос:
Как будет выглядеть разумный подход, чтобы получить такие результаты ниже? (Я не хочу точных решений, только некоторые указания, общие подходы и лучшие практики.)
Решение
Лучше всего использовать пользовательские виджеты и создавать эффект в событии рисования. Здесь есть пример: показ пользовательского светодиодного виджета. Здесь также есть несколько слайдов о пользовательском рисовании и использовании изображений SVG в команде рисования для виджетов: http://saim.pub.ro/ITNQ/L5_Slides_v01.pdf. Использование SVG в команде рисования делает это немного проще, чем использование фиксированных графических файлов BMP, так как тогда вы можете использовать механизм компоновки.
Другие решения
Qt 5 предложений таблицы стилей настроить внешний вид вашего интерфейса.
В частности, если вы хотите нанести текстуру на кнопки, взгляните на этот пример.
Он показывает, как использовать границы для указания областей, которые не должны быть растянуты.
Другое решение — использование таблиц стилей Qt, которые позволяют настраивать ваши виджеты. Проверьте примеры: Примеры таблиц стилей Qt | QtWidgets 5.3 | Документация | Qt Project
Вот стили для QPushButton, который выглядит как кнопка, похожая на изображение. Но это может быть достаточно для ваших требований.
background-color: qradialgradient(spread:pad, cx:0.499807, cy:0.489, radius:0.5, fx:0.499, fy:0.488909, stop:0.0795455 rgba(0, 147, 185, 255), stop:1 rgba(30, 30, 30, 255));
border: 5px solid black;
border-radius: 15px;
Подробное описание того, как сделать что-то похожее на это в QML, см. этот ответ. Если вы знакомы с QPainter, вы можете перенести его на виджеты с C ++.