Программа в запущенном состоянии
2

Первое оконное приложение на Qt

Первая часть статьи. Базовый обзор возможностей Qt и запуск первой Windows программы.

Приветствую тебя дорогой читатель. В этой статье мы поговорим о том как в QT можно создать первое оконное приложение используя только команды и главный файл main.cpp. Данная статья будет разделена на 2 части. В первой части мы с вами создадим само приложение и запустим его на компиляцию при помощи компилятора MinGW с очень короткими комментариями по коду, а во второй части мы разберем весь код до последней детали чтобы у вас сформировалось полное базовое понимание о том как все это работает. Итак пожалуй начнем. Первое что нам необходимо сделать это запустить QT Creator и создать проект. Я думаю нет необходимости объяснять как запустить QT Creator, так что мы начнем сразу с создания проекта.

Видео урок по данной статье

После того как QT запустился нажмите на кнопку новый проект как показано на скриншоте ниже.

Создание нового проекта в Qt

Создание нового проекта в Qt

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

Выбор типа приложения

Выбор типа приложения

После того как вы нажали кнопку выбрать… У вас откроется следующее окно выбора дополнительных параметров, где вам будет предложено выбрать имя вашего проекта и где он будет храниться. ВАЖНО: Не допускайте русских символов в пути где у вас будет храниться ваш проект, Qt не дружит с русскими символами. Эта мера необходима чтобы в дальнейшем избежать ошибок при сборке проекта. Ниже приведен пример как правильно создать имя и путь к проекту Qt.

Выбор пути где будет храниться ваш проект

Выбор пути где будет храниться ваш проект

После того как вы сделали все необходимые настройки, нажмите на кнопку далее.

Далее Qt нам предлагает выбрать комплект при помощи которого мы будем разрабатывать наш проект, я выбрал комплект Desktop Qt 5.8.0 с компилятором от MinGW 32 bit. Вы можете оставить значение по умолчанию или сделать свой выбор комплекта или даже комплектов для разработки вашей программы.  

Выбор необходимого комплекта или комплектов компиляторов с отладчиками.

Выбор необходимого комплекта или комплектов компиляторов с отладчиками.

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

В данном окне оставляем все по умолчанию

В данном окне оставляем все по умолчанию

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

Итог созданного проекта в Qt

Итог созданного проекта в Qt

После того как наш конструктор приложений завершился пришло самое время настроить наш проект так чтобы у нас была возможность выполнить простейшую программу для вывода текста на экран и проверки правильности работы нашего фреймворка. Для начала нам необходимо удалить из нашего проекта все файлы кроме файла main.cpp — вот в этом файле мы и будем в дальнейшем прописывать код для запуска окна с выводом текста в оконном режиме. Вам необходимо оставить все так же как показано на скриншоте ниже после удаления лишних файлов из проекта.

Скриншот до удаления файлов из проекта:

Чуть ниже вы можете увидеть скриншот созданного проекта конструктором Qt без изменений.

До удаления лишних файлов

До удаления лишних файлов из проекта

Скриншот после удаления файлов из проекта:

После удаления лишних файлов из проекта

После удаления лишних файлов из проекта

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

Удаляем весь лишний код из программы

Удаляем весь лишний код из программы

Разработка простейшего кода для оконного приложения:

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

на Русском языке без проблем с кодировкой. Данная проблема уже была предусмотрена в Qt и решена внутренними инструментами.

Для начала добавим следующий код в наш файл main.cpp

Перепешите весь код с данного скриншота в вашу среду Qt в файл main.cpp как показано на скриншоте

Перепешите весь код с данного скриншота в вашу среду Qt в файл main.cpp как показано на скриншоте

Запустите ваш код при помощи зеленого треугольника слева или сочетанием горячих клавиш Ctrl+R. В итоге у вас должно получиться окно с текстом Привет мир!!!

Программа в запущенном состоянии

Программа в запущенном состоянии

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

Вторая часть статьи. Подробный разбор кода:

До текущего момента мы с вами разобрались как можно создать простейшую программу которая только в окне выводит текст не разбираясь в подробностях кода. Теперь пришло самое время разобраться с теми командами которые мы использовали в нашей программе. Первое что мы с вами сделали, это подключили библиотеку QtWidgets — Данная библиотека включает в себя около 300 различных библиотек направленных на создания оконных приложений. Еще QtWidgets можно назвать складом строительных материалов для различных оконных приложений.  Можно было конечно подключить отдельно библиотеки такие как QLabel для создания окон Windows и QApplication для обработки строк с различными аргументами. Но у нас стал бы код чуть длиннее и чуть труднее читаем. А теперь представьте если бы вы создавали программу в которой куча разных функций. И вы бы подключали к каждой функции свою библиотеку. Спустя какое то время вы бы с трудом смогли вспомнить для чего подключено такое большое количество библиотек. Вот как раз в таких случаях и выручают большие библиотеки которые содержат в себе уже весь необходимый строительный материал для создания к примеру оконных программ как QtWidgets.
Вот собственно говоря весь код нашей программы, чуть выше мы с вами уже  разобрали библиотеку QtWidgets

Теперь давайте разберем наш пример. Сначала создается объект класса QApplication, который осуществляет контроль и управление приложением. Для его создания в конструктор этого класса необходимо передать два аргумента. Первый argc аргумент представляет собой информацию о количестве аргументов в командной строке, из которой происходит обращение к программе, а второй argv — это указатель на массив символьных строк, содержащих аргументы, по одному в строке. Любая использующая Qt программа с графическим интерфейсом должна создавать только один объект этого класса, и он должен быть создан до использования операций, связанных с пользовательским интерфейсом.

Затем создается объект класса QLabel. После создания элементы управления Qt по умолчанию невидимы, и для их отображения необходимо вызвать метод show(). Объект класса QLabel является основным управляющим элементом приложения, что позволяет завершить работу приложения при закрытии окна элемента. Если вдруг окажется, что в созданном приложении имеется сразу несколько независимых друг от друга элементов управления, то при закрытии окна последнего такого элемента управления завершится и само приложение. Это правильно, иначе приложение осталось бы в памяти компьютера и расходовало бы его ресурсы.
Наконец, в последней строке программы приложение запускается вызовом
QApplication::ехес(). С его запуском приводится в действие цикл обработки событий, определенный в классе QCoreApplication, являющемся базовым для QGuiApplication, от которого унаследован класс QApplication. Этот цикл передает получаемые от системы события на обработку соответствующим объектам. Он продолжается до тех пор, пока либо не будет вызван статический метод QCoreApplication::exit (), либо не закроется окно последнего элемента управления. По завершению работы приложения метод QApplication::ехес() возвращает значение целого типа, содержащее код, информирующий о его завершении. После того как вы создали весь код и запустили программу – у вас должен получиться следующий результат.

Программа в запущенном состоянии

Программа в запущенном состоянии

Теперь пришло самое время разобраться как работают теги из HTML(язык гипертекстовой разметки) и CSS(каскадные таблицы стилей).

Когда вы создаете объект и передаете конструктору информацию в двойных кавычках, то конструктор автоматически создает окно при помощи QLabel и создает там текстовое поле в котором собственно и будет выводиться ваш текст. Благодаря новым возможностям от Qt есть возможность использовать различные теги от HTML и CSS. Такая возможность позволяет оформлять различные элементы программы в различных стилях что очень сильно помогает в разработке дизайна программ. Главное не забывать о том что в HTML и CSS используются такие спец. Символы как точка с запятой и двойные кавычки в для написания нескольких свойств в CSS для текста или какого то объекта. В Qt придется забыть о данных знаках при написания кода оформления в двойных кавычках так как это может вызвать ошибку при компиляции. А вот что касается простеньких свойств в HTML и CSS которые имеют не более 1 параметра, то здесь работает все корректно. Ниже привел пример оформления, с кодом вы можете ознакомится на скриншоте.

Программа в запущенном состоянии с примененными стилями из HTML и CSS

Программа в запущенном состоянии с примененными стилями из HTML и CSS

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

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

Так же большая просьба написать в комментариях, насколько бы вам было интересно начать параллельное изучение HTML и CSS для Qt.

Сергей Будейкин

2 Comments

  1. Скомпилированный файл выдает вот это:
    запуск программы невозможен так как на компьютере отсутствует qt5widgets.dll
    В уроках пожалуйста объясняйте все подробно и с разбором возможным проблем. Иначе это не урок а просто мысли для самого себя.

    • Вы скорее всего пытались запустить приложение на другом устройстве уже в скомпилированном виде без инсталятора и без исходников QT. Данный урок показывает как создать первую программу в программе Qt, если вы хотите инсталировать ваше приложение на другую машину, необходимо искать урок про создание инсталяторов для программ Qt.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *