webdonsk.ruКак в qt designer сделать красивую кнопку
Добавил пользователь Валентин П. Обновлено: 31.08.2024
Аннотация: Изучаются выджеты - визуальные элементы, из которых состоит графический интерфейс пользователя, их компоновка, политика размеров, сигнально-слотовые соединения, элементы графического интерфейса и их использование.
13.1 Виджеты (Widgets)
Виджеты ( Widgets ) — это визуальные элементы, из которых состоит графический интерфейс пользователя.
- Кнопка (класс QPushButton );
- Метка (класс QLabel );
- Поле ввода (класс QLineEdit );
- Числовое поле-счётчик (класс QSpinBox );
- Строка прокрутки (класс QScrollBar ).
В Qt есть около 50-ти готовых классов графических элементов доступных для использования. Родительским классом для всех виджетов является класс QWidget . От него наследуются все главные свойства визуальных элементов, которые мы тщательно рассмотрим. Исследование способов разработки программ с графическим интерфейсом начнём с примера.
Создадим пустой файл проекта. Запустим мастера проектов и выберем в разделе Projects (Проекты) пункт Other Project (Другой проект) . Далее выберем тип проекта Empty Qt Project (Пустой проект Qt) . К файлу проекта добавим содержимое:
Теперь создадим простую программу с окном, в котором мы будем выводить надпись. Установим размер окна и текст его заголовка, а также установим шрифт для надписи. Для этого создадим файл main.cpp со следующим содержанием:
Как видим, элементы, из которых состоят интерфейсы в Qt , имеют собственные позицию и размер — так называемую "геометрию" — и, таким образом, занимают соответствующую прямоугольный участок на экране (см. рис. 13.1). Также каждый из элементов имеет настройки, которые определяют его поведение и вид.
Для создания структуры виджеты организовывают в иерархию по принципу "часть — целое". Каждый из виджетов может содержать другие виджеты. Такой визуальный элемент становится "родителем" (родительским виджетом) для элементов, которые он содержит. Отметим, что такие отношения не следует путать с наследованием в C++ — отношениями между классами в программе. Отношения между виджетами являются отношениями между объектами. Такие отношения порождают несколько последствий:
- родительский элемент будет отвечать за удаление дочернего элемента: если родительский виджет удалят — то он автоматически удалит и все дочерние элементы;
- родительский виджет размещает дочерние виджеты внутри себя, части дочерних виджетов, которые выходят за пределы родителя будут невидимыми;
- часть состояния родительского виджета передаётся дочерним — это касается некоторых свойств (видимость, активность) и стилей, которые накладываются на визуальный элемент.
Виджеты, которые не имеют родителя (виджеты верхнего уровня), имеют вид отдельных окон в программе. Рассмотрим пример. Назовём новый проект ParentExample . Файл проекта будет содержать обычные для GUI -проекта настройки:
Для виджета, который мы будем использовать в качестве главного окна создадим новый класс. Для этого в категории Files and Classes (Файлы и классы) выберем раздел С++ и выберем С++ Class (см. рис. 13.2).
Следующим шагом будет создание нескольких элементов на окне. Для этого откроем файл parentwidget.cpp и изменим код конструктора класса. Для отображения элементов достаточно создать их в конструкторе класса и задать ParentWidget как отца для них. Код parentwidget.cpp выглядит так:
Поскольку родительским элементом является ParentWidget , то метка ( QLabel ), кнопка ( QPushButton ) и текстовое поле (QLineEdit) находятся в его пределах. Позицию дочерних виджетов задают относительно левого верхнего угла отца. В этом легко убедиться изменив размеры и позицию окна нашей программы. Обратите внимание на то, как мы создавали элементы пользовательского интерфейса в динамической памяти используя оператор new . Это гарантирует, что элементы не будут удалены после завершения работы конструктора ParentWidget .
Я пытаюсь создать круглую кнопку в Qt. Простая форма с одной кнопкой QPushButton был создан в дизайнере. Я пытаюсь превратить это в круглую кнопку, используя setMask() , Как только setMask() применяется кнопка исчезает. Нужно ли создавать собственный виджет, чтобы сделать круглую кнопку?
Примечание. Если кнопка создается в коде и применяется к окну до его отображения, кнопка отображается. Я хотел бы использовать возможности WYSIWIG Qt Designer, а не создавать всю форму в коде.
Решение
Это становится невидимым, но это потому, что у вас нет эллипса, центрированного вокруг правильной точки.
Попробуйте этот код, и вы увидите:
Ps. Почему вы устанавливаете высоту кнопки дважды? Я предполагаю, что это опечатка, а вы имели в виду ширину.
Другие решения
Я думаю, что самым простым решением было бы использование таблицы стилей.
Смотрите также Примеры а также ссылка .
Обратите внимание, что вы должны создать полный стиль для вашей кнопки, так как стандартный стиль не будет применяться.
Задача создать кнопку в виде произвольной картинки (как иконка на раб. столе). Есть ли стандартные средства для таких вещей или придется наследовать QAbstractButton.
настоящий мужчина должен поставить линукс, написать хелло ворлд и создать свою кнопку
насколько я помню на любую кнопку qt можно прилепить картинку
Может лучше от QToolButton наследовать?
>насколько я помню на любую кнопку qt можно прилепить картинку Да, но это будет квадратная кнопка с картинкой. Мне же надо чтобы форма кнопки была в виде произвольной иконки, или же хотябы чтобы прямоугольника не было видно(даже во время нажатия).
смотрите в сторону paintEvent
Делал когда-то, еще на Qt3. Смотри в сторону QWidget::setMask.
setMask для выделения активной области кнопки. Делай хоть с дыркой в середине.
Точно. Давно дело было. Делал кнопку из 3-х картинок, отрисовка шла в drawButton, а setMask использовал для того, чтобы кнопка была произвольной формы.
вы должны понять, что в Qt есть отличная документация. Может, лучше потратить некоторое время на её прочтение ? Плюс куча примеров в дистрибутиве.
Да , документация там отличная , просто она иногда запутана немного или чего-то нехватает - Например там c OpenGL примеров мало :(
Шаг 6.
Библиотека PyQt5. Знакомство с PyQt5. Создание окна с помощью программы Qt Designer. Создание формы
На этом шаге мы рассмотрим начала работы с Qt Designer .
Если вы ранее пользовались Visual Studio или Delphi , то вспомните, как с помощью мыши производили на форме размещение компонентов: вы щелкали левой кнопкой мыши на соответствующей кнопке на панели инструментов и перетаскивали компонент на форму, затем с помощью инспектора свойств производили настройку значений некоторых свойств, а остальные свойства получали значения по умолчанию. При этом весь код генерировался автоматически. Произвести аналогичную операцию в PyQt позволяет программа Qt Designer , которая входит в состав этой библиотеки.
Создание формы
Для запуска программы Qt Designer в меню Пуск выбираем пункт Программы (или Все программы ) | PyQt GPL v5.4.1 for Python v3.4 (x32) (или PyQt GPL v5.4.1 for Python v3.4 (x64) ) | Designer , в окне Новая форма открывшегося окна (рисунок 1) выделяем пункт Widget и нажимаем кнопку Создать - откроется окно с пустой формой, на которую с помощью мыши можно перетаскивать компоненты из панели Панель виджетов.
Рис.1. Программа Qt Designer
В качестве примера добавим на форму надпись и кнопку. Для этого на панели Панель виджетов в группе Display Widgets щелкнем левой кнопкой мыши на пункте Label и, не отпуская кнопку мыши, перетащим компонент на форму. Затем проделаем аналогичную операцию с компонентом Push Button , находящимся в группе Buttons , и разместим его ниже надписи. Теперь выделим одновременно надпись и кнопку, щелкнем правой кнопкой мыши на любом компоненте и в контекстном меню выберем пункт Компоновка | Скомпоновать по вертикали . Чтобы компоненты занимали всю область формы, щелкнем правой кнопкой мыши на свободном месте формы и в контекстном меню выберем пункт Компоновка | Скомпоновать по горизонтали .
Рис.2. Форма после компоновок
Теперь изменим некоторые свойства окна. Для этого в панели Инспектор объектов (рисунок 3) выделим первый пункт ( Form ), перейдем в панель Редактор свойств (рисунок 4), найдем свойство objectName и справа от свойства введем значение MyForm .
Рис.3. Панель Инспектор объектов
Рис.4. Панель Редактор свойств
Затем найдем свойство geometry , щелкнем мышью на значке уголка слева, чтобы отобразить скрытые свойства, и зададим ширину равной 300, а высоту равной 70 (рисунок 4), - размеры формы автоматически изменятся. Указать текст, который будет отображаться в заголовке окна, позволяет свойство windowTitle .
Чтобы изменить свойства надписи, следует выделить компонент с помощью мыши или выбрать соответствующий ему пункт в панели Инспектор объектов . Для примера изменим значение свойства objectName на label, а в свойстве text укажем текст надписи. Найдем свойство alignment , щелкнем мышью на значке уголка слева, чтобы отобразить скрытые свойства, и укажем для свойства Горизонтальное значение AlignHCenter .
Рис.5. Редактор свойств для надписи
Теперь выделим кнопку и изменим значение свойства objectName на btnQuit , а в свойстве text укажем текст надписи, которая будет выводиться на кнопке.
Рис.5. Редактор свойств для кнопки
Кстати, изменить текст надписи или кнопки также можно, выполнив двойной щелчок мышью на компоненте.
Читайте также: