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