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