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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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