Быстрый старт с Qt Designer

Использование Qt Designer включает в себя четыре основных шага:

1. Выберите форму и объекты
2. Расположите объекты на форме
3. Подключите сигналы к слотам
4. Предварительный просмотр формы

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

Выбор формы Вы начинаете с выбора Widget в диалоговом окне Новая форма.

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

Чтобы гарантировать, что они будут расположены точно так же в вашей программе, вам нужно поместить эти виджеты в макет. Мы будем делать это группами по три. Выберите метку «КРАСНЫЙ». Затем, удерживая клавишу Ctrl, выберите соответствующее поле ввода и ползунок. В меню Форма выберите Разместить в сетке.

Повторите шаг для других двух меток вместе с соответствующими полями ввода и ползунками.

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

Чтобы установить макет, щелкните правой кнопкой мыши где-нибудь на вашей форме, вне трех отдельных макетов, и выберите Разместить горизонтально. В качестве альтернативы, вы также можете выбрать Разместить в сетке — вы по-прежнему увидите то же расположение (показано ниже).

Примечание: Основные макеты не видны на форме. Чтобы проверить, установлен ли у вас основной макет, попробуйте изменить размер своей формы; ваши виджеты должны изменять свой размер соответственно. В качестве альтернативы, вы можете посмотреть на инспектор объектов Qt Designer. Если у вашего виджета верхнего уровня нет макета, вы увидите значок прерванного макета рядом с ним, .

Когда вы щелкаете по ползунку и перетаскиваете его до определенного значения, вы хотите, чтобы поле ввода отображало положение ползунка. Для этого вам нужно подключить сигнал valueChanged() ползунка к слоту setValue() поля ввода. Вам также нужно выполнить обратные подключения, например, подключить сигнал valueChanged() поля ввода к слоту setValue() ползунка.

Для этого необходимо переключиться в режим Редактирование сигналов/слотов, нажав F4 или выбрав Редактировать сигналы/слоты из меню Правка.

Подключение сигналов к слотам Щелкните по ползунку и перетащите курсор к полю ввода. Появится диалоговое окно Настройка подключения, показанное ниже. Выберите правильный сигнал и слот и нажмите ОК.

Повторите шаг (в обратном порядке), щелкнув по полю ввода и перетащив курсор к ползунку, чтобы подключить сигнал valueChanged() поля ввода к слоту setValue() ползунка.

Вы можете использовать скриншот ниже в качестве руководства для выбора правильного сигнала и слота.

Теперь, когда вы успешно подключили объекты для компонента «КРАСНЫЙ» RGB-контроллера, сделайте то же самое для компонентов «ЗЕЛЕНЫЙ» и «СИНИЙ».

Поскольку значения RGB находятся в диапазоне от 0 до 255, нам нужно ограничить поле ввода и ползунок этим диапазоном.

Установка свойств виджетов Щелкните первое поле ввода. В Редакторе свойств вы увидите свойства QSpinBox. Введите «255» для свойства maximum. Затем щелкните первый вертикальный ползунок, вы увидите свойства QAbstractSlider. Введите «255» для свойства maximum также. Повторите эту процедуру для оставшихся полей ввода и ползунков.

Теперь предварительно просмотрите свою форму, чтобы увидеть, как она будет выглядеть в вашем приложении — нажмите Ctrl + R или выберите Предварительный просмотр в меню Форма. Попробуйте перетащить ползунок — поле ввода будет отображать его значение тоже (и наоборот). Также вы можете изменить его размер, чтобы увидеть, как макеты, используемые для управления дочерними виджетами, реагируют на различные размеры окна.