1

Создание окна программы с использованием Qt Designer

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

Видео урок по созданию прототипа окна перехода в нужную ячейку таблицы.

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

Готовый прототип окна

Готовый прототип окна

После того как мы создали прототип нашего окна. Пришло самое время перейти в Qt Designer для проектирования нашего окна поиска нужной ячейки в таблице.

Qt Designer — Проектирование окна

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

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

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

  1. После того как у вас откроется окно Qt Designer, вам будет сразу предложено создать проект и будет предложено несколько шаблонных вариантов. Нам необходимо выбрать вариант Widget в котором присутствует только поле под размещение наших виджетов. Нажимаем кнопку создать как показано ниже на скриншоте.

Создание пустого окна под наш проект

    • После того как вы создали пустое окно, сейчас самое важное – это сохранить проект на вашем жестком диске. Я рекомендую сохранить проект по следующему пути. C:\qt_tools\3_gotocell\gotocell. У вас скорее всего возник вопрос а зачем папку gotocell вкладывать в папку с похожем именем. Это необходимо по той причине, что даже если мы укажем Qt в какой папке у нас будет храниться проект и когда мы уже будем работать в Qt Creator – то у нас автоматически создадутся  некоторые элементы и папки, которые будут на один уровень выше. Вам необходимо сделать точно также как показано ниже на скриншоте.
      Окно сохранения нашего проекта

      Окно сохранения нашего проекта

    • В итоге у вас должно получиться точно также после нажатия на кнопку создать, как показано ниже на скриншоте.
    • После того как вы создали и сохранили ваше окно по указанному адресу, пришло самое время заняться наполнением нашего окна. И первое что мы с вами сделаем, это создадим все необходимые элементы для нашего окна программы. Для начала вам необходимо перетащить из панели виджетов все необходимое как показано в нашем прототипе. Сразу хочу сказать, не пытайтесь выравнивать с точностью до миллиметра, точную компоновку сделают наши менеджеры компоновки. В итоге у вас должно получиться примерно также как показано ниже на скриншоте.Скорее всего, вы на скриншоте заметили для себя незнакомый элемент напоминающий синюю пружинку, это Spacer, он нам пригодится при компоновке наших виджетов. Он будет служить для прижатия наших функциональных кнопок к правой части окна.
    • Далее вам необходимо все ваши виджеты поместить в менеджеры компоновки. И в данном случае мы будем использовать два менеджера компоновки QHBoxLayout. Для начала выделите 2 верхних виджета. Для того чтобы выделить необходимые виджеты, нужно зажать клавишу CTRL и щелкнуть левой кнопкой мышки по данному виджету. После того как вы выделите два верхних виджета, вам необходимо зайти в меню форма и выбрать скомпоновать по горизонтали. Далее вам необходимо повторить компоновку по горизонтали с нижними виджетами, и сделать копоновку двух виджетов по вертикали компоновщиком QVBoxWidget. В итоге у вас должно получиться примерно также как показано ниже на скриншотах.После того как мы сгруппировали все виджеты при помощи менеджеров компоновки, самое время настроить наше окно переименовав все элементы как в коде, так и их внешний вид. Для этого нам необходимо будет открыть свойства каждого элемента и внести изменения которые нам необходимы.
    • Далее вам необходимо сделать все точно также как сказано в инструкции ниже:
      • Щелкните по текстовой метке. Убедитесь, что свойство objectName (имя объекта) имеет значение «label» (текстовая метка), а свойство text (текст) установите на значение «&Cell Location» (расположение ячейки). Символ & означает горячая клавиша первой буквы, которая стоит после него.
      • Щелкните по строке редактирования. Убедитесь, что свойство objectName имеет значение «lineEdit» (строка редактирования).
      • Щелкните по первой кнопке. Установите свойство objectName на значение «okButton» (кнопка подтверждения), свойство enabled (включена) на значение «false» (ложь), свойство default (режим умолчания) на «true» (истина), свойство text назначение «ОК» (подтвердить).
      • Щелкните по второй кнопке. Установите свойство objectName на значение «cancelButton» (кнопка отмены) и свойство text назначение «Cancel» (отменить).
      • Щелкните по свободному месту формы для выбора самой формы. Установите objectName на значение «GoToCellDialog» (диалоговое окно перехода на ячейку)  и windowTitle (заголовок окна) на значение «Go to Cell» (перейти на ячейку). У вас должно получиться точно также как на скриншоте ниже.В итоге мы получили почти законченное диалоговое окно, в котором пока не работает доступ к текстовому полю при нажатии горячих клавиш, и отображается знак амперсанды перед текстом &Cell location. Чтобы устранить данную неисправность перейдите к следующему пункту нашего списка.
      • Для того чтобы у нас исчез знак амперсанды, нам необходимо наше текстовое поле привязать при помощи меню правка, далее выбрать изменение партнеров. После этого необходимо перетащить от поля label стрелку к lineEdit. В итоге у вас должно получиться точно также как показано ниже на скриншоте.Для того чтобы выйти из режима редактирования партнеров. Вам необходимо зайти в меню правка, далее в выпадающем списке выбрать изменение виджетов или нажать горячую клавишу F3.
      • После того как вы установили партнерство между label и lineEdit, пришло самое время настроить очередность быстрого доступа к определенному виджету при помощи клавиши TAB. Для этого зайдите в меню правка и выберите пункт изменение порядка переключения. Далее вам необходимо левым щелчком мышки проставить очередность авто-выбора виджета при помощи горячей клавиши TAB. У вас должно получиться точно также как показано ниже на скриншоте.

На текущем этапе. Все что осталось нам сделать в Qt Designer, это протестировать наше окно на правильную работу в предварительном просмотре и сохранить наш проект. После этого мы уже перейдем к его реализации при помощи кода С++. Для того чтобы запустить пред просмотр запущенного нашего окна, зайдите в меню форма и выберите пред просмотр или горячими клавишами ALT+R. После того как у вас запустится пред просмотр. Настоятельно рекомендую воспользоваться горячими клавишами и протестировать все возможные варианты пред просмотра

После успешных тестов сохраните проект комбинацией клавиш CTRL+S или через меню файл->сохранить. На этом наша работа в Qt Designer закончилась, все что вам осталось сделать после сохранения проекта, это закрыть окно Qt Designer и перейти к следующему пункту статьи. То есть уже к кодовой реализации проекта на С++.

Создание и реализация проекта:

Создание проектного файла:

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

В моем случае, это командная стока с компилятором MinGW 5.3 для Qt версии 5.8.

После того как у вас будет запущена командная стока, вам необходимо ввести команду CD и полный путь к проекту. В моем случае это CD C:\qt_tools\3_gotocell\gotocell – По данному пути у меня сохранен проектный файл с расширением .ui – это файл нашего Qt Designer. После того как вы в командной строке открыли нужную вам папку, вы можете временно свернуть данное окно, но не закрывайте его. Далее вам необходимо создать файл в обычном текстовом редакторе или в Qt – main.cpp. Я для этих целей воспользуюсь Qt Creator. При открытии Qt в верхнем меню файл необходимо выбрать пункт создать файл или проект, в котором я выберу создать основной файл CPP и укажу где он будет храниться. Чуть ниже прикреплены скриншоты с полным созданием файла main.cpp в Qt Creator.

Здесь выбираем путь и нажимаем далее.

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

После того как вы создали и наполнили ваш файл main.cpp, необходимо открыть наше свернутое консольное окно ранее и ввести в него 2 команды для создания проектного файла и make файлов для корректной работы нашего проекта в Qt Creator.

qmakeproject – Данная команда служит для создания проектного файла.

qmake gotocell.pro – Данная команда вводится второй и она необходима для правильной генерации make файлов. В конечном итоге у вас должно получиться точно так же как показано на скриншоте ниже.

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

После того как вы нажали на кнопку настроить проект, у вас открылось окно с вашим проектом. Обратите внимание на то что в вашем проекте пока не определяются некоторые стандартные библиотеки такие как QApplication и QDialog. Данная ошибка связана с тем что у вас в проектном файле не подключены некоторые из модулей, о которых мы поговорим в следующей статье. А пока на данном этапе вам нужно добавить одну строку как показано на скриншоте ниже и запустить ваш проект для генерации вашего ui файла уже на языке С++. Строка, которую необходимо добавить выделена красным прямоугольником.

Для того чтобы вывести ваше окно на экран, вам необходимо просто его запустить.

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

Реализация проекта:

Реализация заголовочного файла:

Первое что нам необходимо сделать, это создать заголовочный файл с именем gotocell.h. Обратите внимание на то что мы создаем заголовочный файл gotocell c тем же именем за исключением префикса UI, благодаря этому у нас не возникнет конфликтов между файлами. В данном заголовочном файле мы объявим все необходимые элементы для дальнейшей работы с ними уже в проектном файле gotocell.cpp. Для того чтобы создать заголовочный файл в нашем проекте, выберите в режиме редактирования ваш проект и щелкните по нему правой кнопкой мышки и выберите пункт меню добавить новый как показано ниже на скриншоте.

Далее в открывшемся диалоговом окне выберите пункт, создать заголовочный файл С++. Пример показан ниже на скриншоте.

В следующем окне вам необходимо ввести имя gotocell и нажать кнопку далее как показано на скриншоте ниже.

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

Повторите тоже самое действие с созданием файла, только сейчас вам нужно создать файл с именем gotocell и расширением cpp.

После того как вы создали заголовочный с проектным файлом. У вас должно получиться точно так же как показано на скриншоте ниже.

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

В данном заголовочном файле мы с вами создали класс которым унаследовали два класса QDialog и Ui::GoToCellDialog методом public. Внутри самого класса мы создали конструктор, в котором будем принимать ссылку на родительское окно, в данном случае мы поставили значение по умолчанию ноль. Что говорит о том, что на текущий момент у данного окна нет родителя. Так же мы создали слот типа void в приват зоне. Данный слот во всех подробностях мы с вами разберем в файле реализации кода. На текущем этапе реализация нашего заголовочного файла завершена.

Реализация проектного файла:

Теперь пришло самое время разобраться с файлом gotocell.cpp в котором проводится полная реализация нашего проекта. Чуть ниже приведен полный код нашего файла.

В первых двух строках кода подключается библиотека <QtGui> и заголовочный файл gotocell.h в котором уже произведено предварительное объявление конструктора и слота который будет либо включать или отключать кнопку в зависимости от выполненных или невыполненных условий в окне. Далее у нас открывается конструктор который методом наследования передает в конструктор QDialog значение parent(родите) – об этом я рассказывал в предыдущих статьях.

В конструкторе мы вызываем setupUi() для инициализации формы. Благодаря множественному наследованию мы можем непосредственно получить доступ к членам класса Ui::GoToCellDialog. После создания пользовательского интерфейса setupUi() будет также автоматически подключать все слоты с именами типа on_objectName_signalName() к соответствующему сигналу signalName() виджета objectName. В нашем примере это означает, что setupUi() будет устанавливать следующее соединение «сигнал-слот»:

Также в конструкторе мы задаем ограничение на допустимый диапазон вводимых значений. Qt обеспечивает три встроенных класса по проверке правильности значений: QlntValidator, QDoubleValidator и QRegExpValidator. В нашем случае мы используем QRegExpValidator, задавая регулярное выражение «[A-Za-z][1-9][0-9]{0,2}» которое означает следующее: допускается одна маленькая или большая буква, за которой следует одна цифра в диапазоне от 1 до 9; затем идут ноль, одна или две цифры в диапазоне от 0 до 9. (Введение в регулярные выражения вы можете найти в документации по классу QRegExp.)

Указывая в конструкторе QRegExpValidator значение this, мы его делаем дочерним элементом объекта GoToCell. После этого нам можно не беспокоиться об удалении в будущем QRegExpValidator; этот объект будет удален автоматически после удаления его родительского элемента.

Механизм взаимодействия объекта с родительскими и дочерними элементами реализован в QObject. Когда мы создаем объект (виджет, функция по проверке правильности значений или любой другой объект) и он имеет родительский объект, то к списку дочерних элементов этого родителя добавится и данный объект. При удалении родительского элемента будет просмотрен список его дочерних элементов, и все они будут удалены. Эти дочерние элементы в свою очередь сами удалят все свои дочерние элементы, и эта процедура будет выполняться до тех пор, пока ничего не останется.

Механизм взаимодействия объекта с родительскими и дочерними элементами значительно упрощает управление памятью, снижая риск утечек памяти.  Явным образом мы должны удалять только объекты, которые созданы оператором new и которые не имеют родительского элемента. А если мы удаляем дочерний элемент до удаления его родителя, то Qt автоматически удалит этот объект из списка дочерних объектов этого родителя.

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

В конце конструктора мы подключаем кнопку ОК к слоту accept() виджета Dialog и кнопку Cancel к слоту reject(). Оба слота закрывают диалог, но accept() устанавливает результат диалога на значение QDialog::Accepted (которое равно 1), a reject()  устанавливает результат на значение QDialog::Rejected (которое равно 0). При использовании этого диалога мы можем использовать результат, чтобы узнать, была ли нажата кнопка ОК, и действовать соответствующим образом.

Слот on_lineEdit_textChanged() устанавливает кнопку ОК в активное или  неактивное состояние в зависимости от наличия в строке редактирования допустимого обозначения ячейки. QLineEdit::hasAcceptableInput() использует функцию проверки допустимости значений, которую мы задали в конструкторе.

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

One Comment

  1. PyQt также включает в себя Qt Designer ( Qt Creator ) — дизайнер графического интерфейса пользователя. Программа pyuic генерирует Python код из файлов, созданных в Qt Designer. Это делает PyQt очень полезным инструментом для быстрого прототипирования. Кроме того, можно добавлять новые графические элементы управления, написанные на Python, в Qt Designer.

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

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