Разработка приложений на Qt. Часть 4 — Интерфейс приложения

Приступим к реализации нашего первого приложения. В этой статье я опишу создание интерфейса приложения. В состав Qt ранее входила утилита Qt Designer, позволяющая быстро набросать необходимые виджеты на форму как это делается, например в Visual Studio, теперь же Qt Designer включен в состав Qt Creator. О том как создавать интерфейс через UI-дизайнер я расскажу позже. На начальном этапе важно понять принцип построения GUI через код, научится формировать макет приложения самостоятельно.

Итак, приложение выводящее Hello World. Если вы ранее писали консольные приложения, то нет ничего проще, в С++ эта задача решается примерно так:

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

Мне не хотелось бы показывать до безобразия простое приложение, поэтому немного усложним задачу — пускай у нас будет форма ввода текста, кнопка, и поле куда мы после нажатия кнопки будем писать содержимое текстового поля ввода. Для этих целей у Qt есть все необходимое. Интерфейс приложения формируется из готовых виджетов, их довольно много. Классы UI виджетов как и все без исключения классы Qt начинается всегда с буквы «Q», например QLabel, QPushButton и т.д. У них в свою очередь есть поля и методы с которыми можно взаимодействовать.

Открываем наш widget.h из прошлой части и подключаем классы необходимых виджетов:

Здесь мы подключили виджет вертикально-ориентированного макета (лаяута), виджет кнопки, поля ввода и метки. Далее объявим экземпляр каждого класса в секции private:

С объявлениями закончили, приступим к реализации, откройте widget.cpp, и в конструкторе класса мы напишем определения виджетов:

Здесь происходит следующее — мы создали экземпляр лаяута, кнопки (в конструктор которой мы передали текстовую строчку Press me — это будет текст на кнопке), поле ввода в котором сразу будет зашит текст Hello world и текстовую метку в которую передаем пустую строку, что бы там ничего не отображалось. Позже мы сделаем так, что бы текст из поля ввода попадал туда.

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

Специально для этого в Qt имеются менеджеры компоновки, которые берут всю грязную работу на себя. Программисту достаточно в него добавить виджеты и менеджер будет динамически менять их размер в зависимости от размеров главного окна. Таким менеджером в нашей программе является QVBoxLayout. Всего в Qt их несколько, подробнее о каждом из них я опишу в следующих статьях. А теперь добавим виджеты в лаяут, делается это через метод addWidget:

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

qt_creator_4_1

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

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

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