Быстрый старт с 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 или выберите Предварительный просмотр в меню Форма. Попробуйте перетащить ползунок — спин-бокс также будет отражать его значение (и наоборот). Кроме того, вы можете изменить его размер, чтобы увидеть, как макеты, используемые для управления дочерними виджетами, реагируют на разные размеры окна.