01.00 Создание графического Qt приложения с помощью VS tools.

Создание графического приложения с помощью Qt VS tools.

В среде MSVS 2017 будет создано приложение "Адресная книга".

Создание проекта Qt GUI приложения.

Чтобы в MSVS создать GUI приложение:

1. Выбираем пункт меню New Project > Installed > Templates > Visual C++ > Qt > Qt GUI Application.
2. В поле Name вводим AddressBook, потом жмем OK.
3. Пропускаем диалог Welcome -  жмем Next.
4. Выбираем модули для включения в проект, затем жмем Next. В данном случае - ничего не выбираем.
   Модули, которые обычно нужны для в проектах GUI приложений, выбраны по умолчанию.
5. В поле Base class в качестве типа базового класса вводим QWidget.
6. Устанавливаем галку в чекбоксе Lower case filenames, чтобы в названиях использовались сгенерированных файлов использовались лишь прописные буквы.
7. Устанавливаем галку в чекбоксе Precompiled header - если хотим использовать прекомпилированный заголовок.
8. Для использования обычной иконки Qt устанавливаем галку в чекбоксе Add default application icon.
9. Жмем Finish, проект создан.

Мы получили маленькое рабочее приложение Qt. Для построения приложения выбираем пункт меню Build > Build Solution, затем выбираем  Debug > Start Debugging для запускаt. Пока всего лишь пустое окно.

Конструирование Главного Окна

Для конструирования главного окна приложения можно использовать Qt Designer, который покажет некоторые виджеты, размещенные в :

Подробнее о Qt Designer можно прочесть Руководстве пользователя Qt Designer.

Добавление виджетов

Для добавления и настройки:

1. Чтобы открыть Qt Designer, в окне MS VS Solution Explorer выполним дабл-клик по строчке addressbook.ui.
2. В панели виджетов Designer выбираем List Widget и перетаскиваем его на форму, добавится QListWidget.
3. В Редакторе свойств устанавливаем значение свойства ObjectName равным addressList.
4. Перетаскиваем в верхний правый угол формы виджеты Push Button - добавятся QPushButton, таким образом создадим кнопки Add и Delete.
5. Зададим имена кнопок: addButton и deleteButton, а в свойстве text укажем  Add и Delete соответственно.
6. Перетащим на форму пару виджетов  Label для  добавления объектов QLabel - для отображения выбранного элемента списка.
7. Переименуем первый лейбл в nameLabel и изменим его свойство text на <No item selected>.
8. Переименуем второй лейбл в  emailLabel, а свойство text оставим пустым.

Расположение виджетов должно быть примерно таким, как показано на картинке выше. Чтобы виджеты правильно позиционировать и быть уверенным, они будут правильно менять свои размеры при изменении размеров формы, нужно добавить на форму  компоновщики - layouts.

Добавление виджетов в компоновщики

Для кнопок нужен вертикальный компоновщик, а для того, чтобы кнопки прижимались к верху, нужна подпорка - спейсер. Кроме того, еще нужен компоновщик для управления позиционированием других виджетов.

Чтобы добавить виджеты на компоновщики:

1. Перетягиваем на форму элемент Vertical Spacer.
2. Выбираем кнопки и спейсер, а затем выбираем пункт меню  Form > Lay Out Vertically - будет добавлен вертикальный компоновщик (QVBoxLayout).
3. Выбираем виджет списка, компоновщик с кнопками и обе метки, затем выбираем пункт меню Form > Lay Out in a Grid - будет добавлен копоновщик по сетке (QGridLayout).
   Замечание: Убедитесь, что метки по ширине почти такие же, как форма. Иначе компоновщик-сетка сделает их по ширине равными списку адреса.
4. Выберите Form > Preview, чтобы полюбоваться на форму без ее компиляции.
5. Выберите File > Save для сохранения формы.

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

Добавление диалогов

Так как главное окно готово, начнем наполнять приложение функциональностью. Чтобы при нажатии на кнопку Add в приложении открывался диалог, создадим диалог Add Address и вызовем его из соединения слота с кнопкой Add.

Для создания формы UI можно воспользоваться файловым визардом Qt в MSVS, будт создана форма UI, содержащая кнопки OK и Cancel, связанных  со слотами QDialog::accept() и QDialog::reject() соответственно. Для добавления других виджетов на форму можно использовать Qt Designer.

Создание диалога

Чтобы добавить в диалог в проект:

1. В MSVS выбираем Project > Add Qt Class > Installed > Visual C++ > Qt > Qt GUI Class.
2. В поле Name вводим AddDialog, затем жмем Add.
3. Пропускаем диалог Welcome, жмем Next.
4. В поле Base class в качестве базового класса указываем QDialog.
5. Выбираем радиокнопку Multiple inheritance (множественное наследование).
6. Выбираем чекбокс Lower case filenames, чтобы в именах генерируемых классов использовались только прописные символы.
7. Жмем Finish, будут созданы исходник, заголовок и UI файл диалога.

Проектирование диалога

Проектируем диалог:

1. В Solution Explorer MSVS выполним дабл-клик по строчке файла adddialog.ui, чтобы открыть Qt Designer.
2. В Qt Designer вводим Add Address в свойство windowTitle.
3. На форму добавляем лейбл Label, устанавливаем свойство objectName в nameText, а свойство text - в Name:.
4. Добавляем еще одну метку Label и устанавливаем ее свойство objectName в emailText, в свойство text property в Email:.
5. Добавляем виджет Line Edit (QLineEdit) и устанавливаем свойство objectName в nameEdit. Свойство text оставляем пустым.
6. Добавляем еще один виджет Line Edit и устанавливаем свойство objectName в emailEdit. Свойство text оставляем пустым.
7. Выбираем метки и строчные редакторы, затем выбираем Form > Lay Out in a Grid, чтобы добавить сеточный компоновщик.
8. Добавляем Push Button и устанавливаем значение свойства objectName в okButton, в свойство text - в OK.
9. Слева от кнопки добавляем горизонтальный спейсер - подпорку..
10. Добавляем горизонтальный компоновщик для спейсера и кнопки.
11. Добавляем вертикальный спейсер между метками и кнопкой.
12. Добавляем вертикальный компоновщик для меток и спейсера.
13. Добавляем сетчатый компоновщик для обоих компоновщиков.
14. Выбираем Form > Preview для предварительного просмотра формы без ее компиляции.
15. Выбираем File > Save для сохранения формы.

Подключение к кнопке ОК диалога

Чтобы кнопка OK вызывала слот QDialog::accept(), кликаем кнопку Edit Signals/Slots тулбара, в результате входим в Qt Designer's Signals and Slots Editing Mode.

Кликаем кнопку OK, перетаскиваем курсор мыши на пустую область формы, затем отпускаем кнопку мыши. В открывшемся диалоге Configure Connection, соединяем сигнал кнопки QPushButton::clicked() со слотом формы QDialog::accept().

Открытие диалогов из Главного окна

Чтобы вызвать диалог нажатием кнопки Add главного окна, нужно добавить слот к классу AddressBook и из слота вызвать AddDialog.

Формы, которые создаются с помощью Qt Designer, для установления соединений между сигналами, генерируемыми дочерними виджетами формы и слотами, которые следуют правилам наименования on_<sender>_<signal>(), вызывают метод QMetaObject::connectSlotsByName(). Чтобы приложение реагировало правильно на нажатие кнопки Add, нужно реализовать слот с именем on_addButton_clicked().

Для реализации слота, в MSVS открываем файл addressbook.h и добавляем объявление слота:

private slots:
    void on_addButton_clicked();

Затем открываем файл addressbook.cpp и добавляем определение слота:

void AddressBook::on_addButton_clicked()
{
    AddDialog dialog(this);
    dialog.exec();
}

Для соединения других сигналом, нужно добавить сигнал в класс AddressBook. Для этого потребуется редактировать оба файла - addressbook.h и файл реализации addressbook.cpp.

Включаем #include adddialog.h в addressbook.cpp:

#include "adddialog.h"

Для тестирования сделанных изменений построим и запустим приложение. Нажимаем на кнопку Add и наблюдаем появление диалога Add Address, жмем кнопку OK, чтобы закрыть его.

Добавление элементов к виджету Список

Когда пользователь нажимает OK, введенный элемент должен быть добавлен к QListWidget. Для реализации данной функциональности изменим код в слоте  on_addButton_clicked() на следующий:

    AddDialog dialog(this);

    if (dialog.exec()) {
        QString name = dialog.nameEdit->text();
        QString email = dialog.emailEdit->text();

        if (!name.isEmpty() && !email.isEmpty()) {
            QListWidgetItem *item = new QListWidgetItem(name, ui.addressList);
            item->setData(Qt::UserRole, email);
            ui.addressList->setCurrentItem(item);
        }
    }

Диалог запускается. Если пользователь после ввода данных нажмет OK, поля Name и Email извлекаются, и создается элемент QListWidgetItem, который содержит данную информацию.

Отображение выбранного элемента

Когда пользователь выбирает элемент в виджете списка, должны быть обновлены метки nameLabel и emailLabel в нижней части формы. Такое поведение требует наличие другого слота, который будет добавлен в класс AddressBook.

В файл addressbook.h,  добавим в класс следующий код:

    void on_addressList_currentItemChanged();

Затем в файл addressbook.cpp следующий блок кода:

void AddressBook::on_addressList_currentItemChanged()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        ui.nameLabel->setText("Name: " + curItem->text());
        ui.emailLabel->setText("Email: " + curItem->data(Qt::UserRole).toString());
    } else {
        ui.nameLabel->setText("<No item selected>");
        ui.emailLabel->clear();
    }
}

Благодаря соглашению об именовании, этот слот автоматически соединится с сигналом QListWidget::currentItemChanged() виджета addressList и вызывается всякий раз, когда меняется выбранный элемент списка..

Добавление функциональности к кнопке Delete

Для реализации слота для кнопки Delete, откроем в MSVS файл addressbook.h и добавим объявление слота on_deleteButton_clicked(). Затем откроем файл addressbook.cpp и добавим реализацию слота on_deleteButton_clicked().

Код тела слота:

void AddressBook::on_deleteButton_clicked()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        int row = ui.addressList->row(curItem);
        ui.addressList->takeItem(row);
        delete curItem;

        if (ui.addressList->count() > 0)
            ui.addressList->setCurrentRow(0);
        else
            on_addressList_currentItemChanged();
    }
}

Приложение готово.

Создание файлов Qt Project

Чтобы можно было построить приложение на других платформах, для проекта следует создать файл .pro.

Чтобы Qt VS Tools создал базовый файл .pro, необходимо:

1. Выбрать Qt VS Tools > Create Basic .pro File.
2. В диалоге Export Project следует убедиться, что выбран чекбокс Create .pri file, затем нажать OK.
3. Нажать Save для использования размещения по умолчанию и имени для сохранения файла .pri.

Более подробную информацию о файлах .pro и связанных с ними файлами .pri, смотрим Managing Projects.

Теперь у нас есть рабочие .pro и .pri файлы для нашего проекта. Для более сложных проектов, файл .pro следует отредактировать вручную, чтобы сделать проект рабочим на всех платформах. Тем не менее, для тестового проекта, сгенерированного файла  .pro обычно достаточно.