Основы работы с Qt Designer

1. Запустите Qt Designer. Перед вами появиться вот такой диалог:

Рис. 2.1. Стартовое окно

Здесь все интуитивно понятно – вы можете создать диалог с кнопками (снизу, сбоку) или же без них, обычное главное окно и виджет (посмотрите теоретическое введение к предыдущей лабораторной, если забыли, что это такое), также есть кое-какие другие варианты. Можем сразу указать размер окна.

Также вы можете открыть для редактирования уже имеющуюся экранную форму.

Давайте создадим простой диалог: выберите Dialog with Buttons Bottom и нажмите Создать.

2. Перейдем к заполнению формы содержимым. В левой части экрана найдите Label на панели виджетов в разделе Display Widgets и поместите его на форму. Теперь уже в правой части экрана в редакторе свойств в разделе QLabel в поле text напишите что-нибудь (либо просто щелкните два раза на самом Label).

Если текст не поместится, то растяните Label – его размеры можно менять, как на самой форме, так и редактируя значения свойства geometry раздела QWidget.

3. Нажмите комбинацию Ctrl+R или выберете пункт меню Форма - Предпросмотр.

Рис. 2.2. Предпросмотр созданного диалога

4. Обратите внимание на кнопочку , дабы снабдить ее некой функциональностью стоит заполнить свойство whatsThis для интересующих пользователя элементов формы. Сделать это можно не только через окошко Свойства (оно же Property Editor), но и с помощью контекстного меню (см. рис. 3.3). Кстати, в качестве подсказки может выступить даже картинка, для этого всего лишь стоит нажать Insert Image , либо прописать в уже упомянутом свойстве whatsThis что-то вида (красным выделен путь к картинке):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">\n<html><head><meta name="qrichtext" content="1" /><style type="text/css">\np, li { white-space: pre-wrap; }\n</style></head><body style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;">\n<p align="center" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><img src=":/images/heart.svg" /></p></body></html>

В любом случае вам предстоит подключить файл ресурсов, воспользовавшись кнопкой Edit Recourses . О подключении файла ресурсов см. раздел 3.1.2, п.3.

Рис. 2.3. Редактирование подсказок

Если же мы хотим, чтоб подсказка всплывала сама по себе, то следует работать со свойством toolTip.

Набросайте на форму еще несколько элементов и изучите панель инструментов: как минимум освойте группировку элементов на форме.

Рис. 2.4. Панель инструментов

Помимо этого мы еще можем поменять шрифт (свойство font) и курсор (свойство cursor), когда он находиться над одним из элементов нашей формы.

А теперь можно и посмотреть различные варианты отображения, выбирая Форма – Предпросмотр в.

Рис. 2.5. Предпросмотр того же диалога в стиле Cleanlooks

5. Сохраните ваш труд: Файл – Сохранить. Дайте ему некое осмысленное название, например: Simple_dialog.ui.

6. Закройте Qt Designer и откройте Qt Creator. Там загрузите проект Hello (созданный в ходе предыдущей лабораторной). И щелкните на нем правой кнопкой мыши – появиться контекстное меню, в котором выберите Добавить существующие файлы…

Рис. 2.6. Контекстное меню для проекта Hello

и добавьте в проект ваш диалог.

7. А теперь попытаемся его включить в программный код. Если вы внимательно просмотрите проектный файл, то увидите, что в него добавилась строчка:

FORMS += Simple_dialog.ui,

а еще у нас в каталоге (где находится исполняемый файл) появитсяся (после того, как Вы сделаете ) файл: ui_Simple_dialog.h. Этот файл автоматически генерируется на основе ui-файла, его и необходимо подключать к проекту.

Есть два варианта, как вывести эту форму на экран: простой и через наследование.

7.1. Начнем с простого.

#include <QtGui>

#include "ui_Simple_dialog.h"

int main(int argc, char *argv[])

{

QApplication app(argc, argv);

QDialog* form = new QDialog;

Ui::Dialog ui;

ui.setupUi(form);

form->show();

return app.exec();

}

Пояснение: во 2 строке мы подключаем файл с нашей формой. Наибольший интерес представляют строки с 8 по 10.

(8) Теперь мы ведь работаем с диалогом, посему его и создаем.

(9) Создаем переменную для формы, разработанной в Qt Designer. Когда напишете Ui можете щелкнуть по этим 2 буквам правой кнопкой мыши и выбрать Перейти к символу под курсором, таким образом вы очутитесь в листинге ui_Simple_dialog.h (здесь ничего менять нельзя, но посмотреть можно).

Рис.2.7. Контекстное меню для Ui

Dialog – это название созданной нами в Qt Designer формы, его можно поменять при желании.

Рис.2.8. Редактор свойств, изменение имени формы

(10) Связываем переменную ui с переменной form.

7.2. А теперь попробуем сделать тоже самое, но только с наследованием. Для этого добавим в проект еще два файла: