Первое приложение с QT: процесс, ошибки, лайф-хаки

Итак, начинаем работу с QT. Здесь и ниже использованы видео-уроки ->  отсюда и личный опыт их применения. 

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

Сегодня мы создадим первое приложение с текстом, кнопкой и вторым окном, которое откроется по нажатию на кнопку.

Основные моменты для понимания приложений с GUI на Qt

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

Это изображение имеет пустой атрибут alt; его имя файла - image-5.png
Создание приложения Qt с графическим интерфейсом

Во-вторых, наша работа, по большей части, будет состоять из двух частей: работы в графическом редакторе и работы с кодом.  То есть, мы будем вручную добавлять определенные элементы на пользовательское окошко, а после уже программно заставлять эти объекты выполнять определенные действия. Дальше будут примеры, но важно осознать сам процесс.

И последнее. Для работы с кодом нужно понять, как устроен этот фреймворк. Все объекты графического интерфейса — окна, кнопки, текстовые поля и т.д. — это классы. Исходя из этого мы и будем строить с ними свои взаимоотношения. У них, как у всех классов, есть h.- файлы с перечнем переменных и функционала, есть cpp-файлы с описанием этого функционала. Какие-то объекты являются самостоятельными, какие-то — часть других объектов. С этим разберемся позже. Сейчас важно понимать, что работать с ними мы будем как и привыкли в С++: создавая переменные и обращаясь к их функционалу из-под указателей или из-под объектов.

Например, мы можем создать текстовое поле. В Qt такой объект называется label.

QLabel *label = new QLabel ("Hello word!");
label-> resize(400);
label->show();

Как видите, мы динамически создали указатель на объект типа QLabel,и далее из-под этого указателя обратились к его методам — изменили размер и заставили вывести на экран. Аналогично происходит работа со всеми остальными объектами.

Создание первого приложения и первые ошибки

  1. Создаем новый проект Qt Widhets. Сделать это можно классическим Файл->Создать файл или проект…, через горячие клавиши Ctrl+N или нажатием на стартовой странице Qt кнопки +Новый проект .
  2. Теперь у нас имеется «заготовка» проекта. Её уже можно собрать и запустить, и мы увидим пустое окно со стандартными панелями состояния и меню. Для сборки и запуска нажимаем Ctrl+B, ждем, пока закончится сборка и запускаем проект с помощью Ctrl+R.
Это изображение имеет пустой атрибут alt; его имя файла - image-7.png
Запуск «заготовки» программы

Добавим свои элементы на это окошко. Для этого в редакторе нужно найти папку Формы и открыть файл mainwidow.ui.

Это изображение имеет пустой атрибут alt; его имя файла - image-9.png

Теперь мы попадаем на вкладку Дизайн, где собственно и будем проводить манипуляции с окном. Справа находятся все доступные элементы, слева — их свойства и параметры, а по центру, собственно, само пользовательское окно. Добавление элементов происходит банальным «перетаскиванием» нужного объекта на нашу форму. Для начала добавим текстовое поле (объект называется Label) и кнопку (объект Push Button).

Редактируем текст внутри объектов двойным щелчком левой кнопкой мышки на нем. По задумке далее мы создадим еще одно окно, поэтому на текстовом поле пишем «Открытие второго окна», а на кнопке «Открыть окно».

Это изображение имеет пустой атрибут alt; его имя файла - image-10.png
Пользовательское окно в режиме графического редактора

Теперь создадим еще одно окно, которое должно будет открыться по нажатию кнопки. Для этого возвращаемся в редактор, на нашем проекте нажимаем правой кнопкой мыши, выбираем пункт Добавить новый…  В новом окне нужно выбрать Qt и Класс формы Qt Designer

Это изображение имеет пустой атрибут alt; его имя файла - image-11.png

Далее нам дадут выбор вида окна: с кнопками, без кнопок, виджет. Рядом будет предпросмотр, так что вы сможете сразу посмотреть, какое окно хотели бы создать в итоге. Мы выберем окно без кнопок Dialog without Buttons, т.к. сейчас задача просто открыть второе окошко.

Задаем окну осознанное имя (я назову его SecondWindow) и у нас теперь имеется новое пустое окно в режиме редактора. Добавим сюда текстовое поле с классическим «Hello word!» и перейдем к коду.

Это изображение имеет пустой атрибут alt; его имя файла - image-14.png
Второе окно в режиме редактора

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

Возвращаемся в редактор и снова выбираем файл mainwindow.ui. Для задания действий правой кнопкой мыши нажимаем на нашей кнопке (уж простите за тавтологию) и выбираем пункт «Перейти к слоту». Мы увидим окно выбора действия. Т.к. действие должно происходить по нажатию, мы выбираем пункт clicked(). И попадаем в файл mainwindow.cpp, где для нас уже создана функция on_pushButton_clicked().

Это изображение имеет пустой атрибут alt; его имя файла - image-15.png

Также автоматически были созданы файлы для второго окна. У меня они называются secondwindow.h,secondwindow. cpp  и secondwindow.ui. Для работы со вторым окном нам понадобится переменная типа «второе окно». Создадим же ее и добавим немного действий:

void MainWindow::on_pushButton_clicked()
{
    SecondWindow wind;
    wind.setModal(true);
    wind.exec();
}

Обратите внимание! Для использования второго окна, его необходимо «подключить» к основному. Используем директиву #include «secondwindow.h» в файле mainwindow.cpp

Выше мы создали переменную для второго окна и из-под нее уже вызвали некоторый функционал: сделали окно модальным (второстепенным), и запустили его.

Возможные проблемы

В ходе написания кода или сборки может оказаться, что Qt все равно считает SecondWindow неизвестным форматом. Или при сборке мы встречаем ошибки Error C1083 и LNK2019: Unresolved External Symbol. Не спешите переходить в документацию и искать, что вы сделали не так.

 
В первую очередь проверьте отсутствие опечаток в именах (например,
SecondWidow вместо SecondWindow). Если уверены, что сделали всё
правильно, пересоберите проект насильно: Сборка -> Очистить проект ->
Запустить qmake.

Теперь мы можем запустить наш проект через Ctrl+R и получить окошко с кнопкой, по нажатию которой наше приложение наконец-то поздоровается с миром:

Это изображение имеет пустой атрибут alt; его имя файла - image-12.png
Это изображение имеет пустой атрибут alt; его имя файла - image-13.png

На этом пока все. Более подробное видео по ссылке в начале поста, а примеры кода можно посмотреть здесь.

Qt — первые шаги с нуля

На данный момент Qt — очень востребованный, многофункциональный фреймворк, который имеет невероятно обширный функционал для создания мощных кросплатформенных приложений.

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

Вы можете найти в интернете много мануалов и рекомендаций, но все равно столкнуться с дополнительными сложностями.

Оговорюсь: все публикации будут касаться работы с Qt под Windows.

Для меня установка и настройка выглядели следующим образом:

  1. Скачиваем Qt online installer с официального сайта https://www.qt.io/ . Собственно, на сайте автоматически определяется ваша операционная система и рекомендуются определенные способы установки. Если не планируем писать ничего секретного, можем выбирать Open source версию и не заморачиваться временно-бесплатной версией.
  2. В процессе установки действуем по привычном плану — далее, далее, готово. Учтите, сам по себе Qt с компиляторами и прочим необходимым весит не мало. Но must have галочка на последней (или нужной вам) версии Qt и на подпункте Tools. Все нужные галочки и скрины можно посмотреть здесь, но все равно скопипастим для себя скрины:
Обязательные отметки для установки

Продолжаем.

На вышеупомянутом cppstudio мануал по установке заканчивается после нажатия кнопки Готово и уже через пару несложных манипуляций с кодом мы получаем первое приложение на Qt.

На деле же многие (и я, естественно, стала одной из них) сталкиваются с проблемами. Большинство из них — проблемы линковщика.

Первая проблема, с которой столкнулась я, звучала так:

error LNK1158: не удается запустить «rc.exe»

Несложный поиск в гугле выдал несколько советов. В первую очередь, заходим к самому авторитетному в этом плане источнику — документации. Что мы видим?

Ок, значит нам нужно добавить пусть в переменную среды PATH. Возьмем описание отсюда и применим на практике:

Сделайте это добавлением адреса расположение папки /bin вашего QT (например, c:\Qt\4.4.3\bin) к переменной PATH.

Для более новых версий Windows, PATH может быть расширен через меню Control Panel|System|Advanced|Environment variables.

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

Ок, кажется проблема решена. Пробуем запустить первую программу и (барабанная дробь): снова линкер не находит тот самый rc.exe.

Одна из самых популярных рекомендаций на форумах по этой проблеме — переустановите IDE. Не спорю, отличный совет. Если не брать во внимание, что наш Qt еще девственно-чист и только-только установлен.

Значит, нужно ему помочь другим способом. Лично мне помогла вот эта публикация . Первую часть статьи можно спокойно пропускать, если вы ставите или уже установили версию Qt 5 и выше.

Итак, создаем свой профиль Qt с нужными настройками.

  1. Заходим в меню Инструменты -> Параметры…
  2. В открывшемся окне выбираем подпункт Комплекты и находим там вкладку Профили Qt.

Наша задача — создать свой «особый» профиль с нужными настройками. Нажимаем кнопку «Добавить», задаем имя профиля (на свое усмотрение, но лучше сохранить номер версии) и указываем расположение файла qmake.exe.  Он находится в подкаталоге /bin каталога, куда был установлен Qt. Я устанавливала для себя несколько вариантов, поэтому в этот конкретный профиль выбрала одну из папок с версией winrt_x86_msvc2017.

ВАЖНО! Необходимо выбрать непосредственно exe-файл, а не просто папку расположения.

Нажимаем кнопку «Подробнее» и сохраняем для себя ABI, которое использует эта сборка. Нам нужно будет повторить его на следующей вкладке.

АBI, используемое текущей сборкой

Далее нам нужно выбрать компилятор. Переходим на соседнюю вкладку «Компиляторы«. По аналогии нажимаем кнопку «Добавить», вводим название компилятора и указываем место расположение файла g++.

ВНИМАНИЕ! Необходимо выбрать непосредственно файл g++.exe (именно G, не С).

Проверяем нижнюю строчку текущего окна. Если ABI в этом окне не совпадает с тем, что мы видели на вкладке «Профили Qt», создаем его вручную: Особое -> и нужные параметры по каждому пункту.

Поздравляю, мы на финишной! Теперь вы создаете проект любым удобным способом (Файл->Создать файл или проект… или через кнопку на панели Новый проект). Далее перед сборкой проекта заходите в меню Проекты и нажимаете кнопку Управление:

В открывшемся окне выбираем наш новосозданный профиль Qt в подпункте Особые и нажимаем «Применить».

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

Итак, итоги. Для установки и настройки необходимо:

  • скачать и «стандартно» установить Qt;
  • прописать путь в переменную среды Path;
  • сформировать свой профиль Qt непосредственно в свойствах фреймворка.
  • Выбирать этот профиль при сознании новых проектов.

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