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

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

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

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

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

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

Чтобы гарантировать, что они расположены именно так в вашей программе, вам нужно поместить эти виджеты в компоновку. Мы сделаем это группами по три. Выберите метку "RED". Затем, удерживая нажатой клавишу Ctrl, выберите соответствующие ей поле со спинбоксом и ползунок. В меню Form выберите Lay Out in a Grid.

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

Следующий шаг — объединить все три компоновки в одну главную компоновку. Главная компоновка — это компоновка виджета верхнего уровня (в данном случае, QWidget). Важно, чтобы ваш виджет верхнего уровня имел компоновку; в противном случае, виджеты в вашем окне не будут изменять размер при изменении размера окна. Чтобы установить компоновку, щелкните правой кнопкой мыши в любом месте вашей формы, за пределами трех отдельных компоновок, и выберите Lay Out Horizontally. В качестве альтернативы, вы также можете выбрать Lay Out in a Grid — вы увидите то же самое расположение (показано ниже).

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

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

Для этого вам нужно переключиться в режим Edit Signals/Slots, либо нажав F4, либо выбрав Edit Signals/Slots в меню Edit.

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

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

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

Теперь, когда вы успешно подключили объекты для компонента "RED" RGB-контроллера, сделайте то же самое для компонентов "GREEN" и "BLUE".

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

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

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