Проектиране на интерфейса с Qt
Страницата е създадена на:15 април 2019 и редактирана на: 5 март 2021
За създаването на интерфейса на направена с Qt програма могат да се приложат различни начини:
- Използване само на написан ръчно код на C++, който създава обектите представляващи интерфейсните елементи на програмата. Това е исторически най-старият начин, който може да се види в много от примерните програми, включени във всяка инсталация на Qt.
- Визуален подход, при който се създават .ui файлове форми с помощта на Qt Creator или Designer и .ui файловете не е необходимо да се редактират ръчно.
- Използване на езика QML за описване на интерфейса. Файловете на този език може да се редактират както ръчно, така и визуално в режим Design на Qt Creator.
Кой от тези начини ще бъде приложен, зависи от типа проект, който ще бъде стартиран. Ако започнете проект от тип Qt Console Application, то чрез модифициране и допълване на програмен код, прилагайки първия подход, може да създадете и програма с визуален интерфейс. Ако стартирате Qt Widget Application, ще може да използвате втория начин, а ако стартирате Qt Quick или Qt Quick Controls Application – ще използвате третия начин.
Проектирането на интерфейса с Qt Creator се извършва в режим Design. Този режим напълно повтаря възможностите, които са реализирани и в инструмента за разработка designer, представляващ част от Qt. Разликите между Qt Creator в режим design и отделната програма designer се състоят не в начина на работа и ползване, а произтичат единствено от това, че designer е отделна програма и трябва да се стартира и ползва самостоятелно. Дори и документацията на Qt Creator за разясняване на въпросите, свързани с проектирането на интерфейса, директно препраща към документацията на програмата designer. В настоящата книга на designer е посветена частта Работа с програмата designer.
За да отворите форма в режим design, намерете нейния .ui файл в страничната лента и щракнете двойно върху него. Ако настройката на филтъра на страничната лента е да показва списък от файлове (Simplify Tree), файловете с форми ще разпознаете по разширението .ui и иконата, а при показване на дърво (когато не е поставена отмета Simplify Tree във филтъра), всички форми от проект със система за компилиране с qmake
са в раздел Forms.
Нова форма се създава с команда File – New File or Project... В диалога, който се отваря, в лявата му лента, в групата Files and Classes се избира Qt, а в средната – Qt Designer Form Class или Qt Designer Form и се щраква бутона Choose...
Ако се избере
Qt Designer Form се създава само .ui файл за форма, а при
Qt Designer Form Class – още и .h, и .cpp файлове, съдържащи програмен код,
който дефинира клас на диалог, прозорец или друг интерфейсен елемент. Ако новата форма е предназначена за диалог, това е по-лесния начин за интегрирането му в създаваната програма. Иначе за използване на отделен .ui файл, ще трябва да се пише ръчно програмен код.
За да я стартирате подайте от конзолата команда designer1. От първия прозорец, който показва designer трябва да изберете типа на компонента, който ще създавате. При стартиране на нов проект е естествено това да бъде главния прозорец, така че изберете: Main Window и щракнете бутона "Create".
Прозорците с инструменти, които предлага програмата designer може да се разположат на екрана по два начина: като отделни прозорци (Multiple Top-Level Windows) и като "закотвени" към един главен прозорец (Docked Window). Начинът на показване се избира от менюто: Edit -> User interface Mode. Пробвайте и двата начина и Вижте кой ще Ви допадне повече.
Най-простата програма, направена с Qt, ще показва само един празен прозорец, без никакви компоненти в него, така че само създаването на нов главен прозорец с designer е достатъчно. Щракнете бутона Save Form, за да запишете създадения главен прозорец във файл. Задайте име на файла, например, mainwindow.ui и затворете програмата designer.
Създаване на файлове с първичен код
Има два начина за включване в програми на проектираните с designer компоненти на интерфейса: пряк и чрез създаване на обекти. Вторият е по-подходящ за по-големи проекти и затова него ще опиша. Една утвърдена практика при програмиране на C++ е обектите да се описват в два отделни файла с изходен код: заглавен .h файл и .cpp файл с конкретна реализация на обекта. За описание, например, на обекта MyMainWindow, представящ главния прозорец трябва да се създадат два файла: mainwindow.h и mainwindow.cpp.
В Windows може да създадете тези файлове като щракнете десния бутон на мишката между иконите на директорията, в която искате да се намират и изберете New -> Text Document. Задайте име на файла и отговорете с yes на предупредителното съобщение, че сте сменили разширението. Щракнете двойно върху иконата на новия файл и ако е необходимо посочете да се отвори с notepad.
В Mac OS X, може да създадете файловете с Xcode. Отворете Xcode, избрете от менюто File->New File... и после съответен тип за новия файл - Header File или C++ File.
Съдържанието на файла mainwindow.h нека е:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include "ui_mainwindow.h"
class MyMainWindow : public QMainWindow
{
Q_OBJECT
public:
MyMainWindow(QWidget *parent = 0);
private:
Ui::MainWindow ui;
};
#endif
а на файла mainwindow.cpp:
#include
#include "mainwindow.h"
MyMainWindow::MyMainWindow(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
}
Третият, при това задължителен файл, който трябва да се създаде е този, съдържащ функцията main(). Такава функция трябва да има всяка C++ програма. Естествено, макар и незадължително е този файл да бъде с име main.cpp, а неговото съдържание:
#include
#include "mainwindow.h"
int main(int argc, char *argv[])
{
QApplication app(argc,argv);
MyMainWindow window;
window.show();
return app.exec();
}
Създаване на проектен файл .pro
Всеки, създаван с Qt проект се описва в един текстов файл с разширение .pro. Първото създаване на този файл може да се извърши автоматично с програмата qmake. След като сте създали първите няколко, най-важни файлове от своя проект (mainwindow.ui, mainwindow.h, mainwindow.cpp и main.cpp), подайте от конзолата команда
qmake –project
Компилиране на проекта
Как се компилират Qt програми вече беше описано в Компилиране на програми с Qt.
Изпълнимият файл на успешно компилирания проект в Windows ще намерите в поддиректория release, а в другите операционни системи - в същата директория, в която е изходния код. Ако сте избрали, както предложих, за име на директорията с Вашия проект my1, то изпълнимия файл ще е: my1.exe (съответно my1 в Linux и приложен пакет my1.app в Mac OS X). Стартирайте го. Трябва да се отвори един празен прозорец, който има типично поведение на главен прозорец на програма – може да се мести, да се променят размерите му, да се "сваля" на лентата на задачите, да се показва отново и накрая - да се затвори.
Възможни проблеми
Ако в Windows не сте задали "глобални" променливи на обкръжението QTDIR, QMAKESPEC и PATH, както беше описано в "Създаване на "постоянно" работно обкръжение", при опит за стартиране на изпълнимия файл чрез двойно щракване на мишката може да получите съобщение за грешка – че не са открити някои .dll файлове. За да решите проблема или си създайте "постоянно" работно обкръжение, или стартирайте изпълнимия файл чрез команда от конзолата, например:
releasemy1.exe
Има и трети вариант за решаване на този проблем, но той не е особено елегантен – Изкопирайте необходимите .dll файлове от bin поддиректорията на директориите с Qt в поддиректория release на Вашия проект.
1 Програмата ще се стартира по този начин в Windows или в Mac OS X и Linux, ако сте създали символни връзки, както е писано в За улеснение след инсталирането. Ако в Mac OS X сте инсталирали от инсталационен пакет, отворете designer с Finder, като щракнете върху иконата му /Developer/Applications/Qt/Designer.app или с команда от терминала: open /Developer/Applications/Qt/Designer.app.
Предишна страница: Постъпково изпълнение Debug
Следваща страница: Работа с програмата designer