[TOC] # 前言 做嵌入式的上位機開發需要要用到Qt的,Qt是一個開源、跨平臺的程式和UI開發框架。我們使用Qt可以用Python或者C++進行開發,這裡我使用的全部都是C++,不涉及到Python。 # 一、Qt安裝 要學習Qt前先得學習一下如何安裝Qt,這裡安裝的是QtIDE,是Qt的集成開 ...
目錄
前言
做嵌入式的上位機開發需要要用到Qt的,Qt是一個開源、跨平臺的程式和UI開發框架。我們使用Qt可以用Python或者C++進行開發,這裡我使用的全部都是C++,不涉及到Python。
一、Qt安裝
要學習Qt前先得學習一下如何安裝Qt,這裡安裝的是QtIDE,是Qt的集成開發環境,首先搜索下麵的網址:Qt下載官網
進入這個網站後會出現下麵的界面:
這裡點擊archive
,這個目錄中是存放Qt開發環境安裝包的,然後進入後:
選擇qt
這個目錄,這個目錄中是存放Qt開發環境的下載目錄:
這裡有很多的Qt開發環境的版本,選擇一個你喜歡的(這裡推薦用5.12),然後選擇:
在裡面選擇一個版本後點擊:
這裡如果你是Windows電腦,選擇.exe
,如果是Linux,根據你Linux的版本選擇安裝包。
下載後雙擊安裝,一開始會讓你進行登錄,登錄的話需要去Qt官網進行註冊一下(這個可以自己進行百度),然後將註冊的填寫進去即可。
這邊推薦去官網進行註冊,在這個軟體中註冊不一定能註冊得上去
第二步就是選擇安裝路徑和關聯文件,也就是設置一下路徑
設置完後就需要選擇安裝組件:
這裡需要選擇的是
MinGW 5.3.0 32 bit
Qt Charts
Qt Data Visualization
Qt Purchasing
Qt Virtual Keyboard
Qt WebEngine
Qt Network Auth(TP)
Qt Remote Object(TP)
Qt Speech(TP)
Qt Creator 4.3.0 CDB Debug
MinGW 5.3.0
根據上面列出的工具進行選擇即可。
二、創建一個Qt工程
安裝完成後打開Qt Creator
,打開後就會出現下麵的界面:
點擊左上角的文件
,在裡面選擇新建項目或文件
,然後彈出下麵的界面:
這裡是選擇一個模板或者文件和類,因為我們要建一個工程,所以選擇項目,在裡面選擇Application(Qt)
,其中有一個Qt Widgets Application
,選擇完成後點擊Choose..
進入下一步
這裡是為改項目取個名字並放置在一個文件夾中。
設置好後點擊下一步:
這裡選擇構建項目的編譯器,使用預設的qmake
即可,然後點擊下一步。
這裡是選擇基類的類和類名,文件名,使用ui嗎是一些設置。
需要註意的是Base class
中可以選擇三個選項,第一個是QMainWindow
。
第二個是QWidget
,第三個是QDialog
,先選擇QWidget
,等創建完工程再慢慢解釋一下這些基類的不同點。
這個Generate form
可以選也可以不選,先選擇吧,可能後面有用。
如果不選這個選項,那麼ui
界面就沒有辦法使用。然後點擊下一步
下一步中的內容選擇預設即可,這個是選擇翻譯文件,但咱用不到,所以直接預設。
下一步就是選擇解釋器了
這裡選擇MinGW 32bit
的就可以了,然後下一步,。
下一步也是預設即可
這裡是告訴你這個工程要添加的文件和添加版本控制系統,如果你有可以添加,沒有就算了,直接點擊完成。
等一會就會創建好工程:
左邊是文件,右邊是編輯區,我們來看看創建出來的這些文件:
首先是Student.pro
,這個是工程的配置文件
在這你可以使用代碼配置一下這個項目使用的一些庫或者文件。
然後是放頭文件和源文件的文件夾了,先看一下源文件
在源文件中有兩個文件
main.cpp
是入口文件,在裡面有一個main
函數,程式的入口:
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv); // 實例化QAppLication類
Widget w; // 實例化Widget類
w.show(); // 顯示視窗
return a.exec(); // 讓程式一直迴圈不退出
}
上面的代碼就是main函數中的內容,可以看到這裡的代碼很少,只需要運行這個就可以出現一個視窗了,在裡面其實就是創建一個視窗並顯示並且保持顯示不退出,所以我們的代碼不是在這寫的。
那代碼在哪寫呢?可以在main.cpp中看到一個類,Widget
這個類,這個類是一個視窗類,在源文件中就可以找到這個文件widget.cpp
了。
點擊這個文件進入:
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete ui;
}
可以看到這裡的代碼也很少,有一個構造函數和一個析構函數,構造函數中有一個ui->setupUi(this)
,這個代碼是將ui文件中搭建好的頁面更新顯示出來。我們的代碼一般書寫到這個widget.h
這個文件中。
在文件夾中還有一個文件夾Forms
文件夾,這個文件夾中只有一個文件.ui
,這個就是可以使用拖動控制項來達到搭建UI界面的功能
三、基類的區別和常用函數
在之前創建工程的時候說過,有三個基類,那這三個基類的區別是什麼呢?
下麵就給大家說一下這些區別。
1.QWidget
先說一下我們上面創建的一個基類,這個類是Qt中用於構建GUI界面的基礎類之一,它是集成QObject
類的,這個類提供了視窗控制項等基本元素的功能。
它有很多的功能函數,下麵給大家介紹一下這個基類中的一些常用函數:
1.1 設置視窗標題
使用的函數為:
void setWindowTitle(const QString &)
這個函數可以將視窗的標題改為你指定的內容,比如說我要將我的視窗標題改為:hello,那我的代碼可以這樣寫(這些代碼寫在widget.cpp就是我上面說的那個文件中
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
setWindowTitle("hello"); // 設置視窗標題
}
運行後視窗的標題就會被改變:
當然也可以用實例化變數來進行調用:
widget.setWindowTitle("hello");
1.2 設置視窗大小和顯示位置
這個使用的函數是:
void setGeometry(int x, int y, int w, int h)
/*
x:視窗出現位置的x軸
y:視窗出現位置的y軸
w:視窗的寬
h:視窗的高
*/
它還有一種重載的函數:
void setGeometry(const QRect&);
我們先看上面的那種方式,其中x和y是指以你桌面的左頂點為(0,0)來進行計算
比如說我們要將這個視窗位置設置在中心位置,視窗的寬度和高度分別為600和400,那麼代碼如下:
setGeomentry(1920 / 2, 1080 / 2, 600, 400);
運行代碼後視窗出現的位置就在中心:
這裡為什麼是1920/2和1080/2,因為我的電腦桌面的解析度就是為1920和1080。
也可以用實例化變數來調用設置:
widget.setGeomentry(1920 / 2, 1080 / 2, 600, 400);
如果使用第二種方式,需要先創建一個QRect
對象,然後把這個對象放在形參的位置即可:
QRect rect = QRect(1920/2, 1080/2, 600, 400);
this->setGeometry(rect);
1.3 顯示視窗
這裡使用的函數是
show();
我們在main.cpp中是見到過的,當時實例化Widget這個類後,用實例化對象中的show()
方法就顯示出該視窗了。
widget.show();
1.4 隱藏視窗
使用的函數是:
hide();
這個是可以隱藏QWidget創建的視窗,使用的方法就是直接用實例化出來的實例化對象.hide()
widget.hide();
1.5 改變視窗大小
這裡使用的方法是:
void resize(int w, int h)
填寫的參數很簡單,就是視窗改變後的寬和高。
比如說我沒有使用setGeomentry()
更改視窗的位置,那我就可以使用這個函數對視窗進行更改大小:
resize(600, 400);
當然你也可以直接直接用實例化對象來調用這個方法:
widget.resize(600, 400);
1.6 設置視窗的位置
如果你想單獨修改視窗的位置,並不想修改大小就可以使用這個函數
void move(int x, int y);
也有一個重載的
void move(const QPoint &);
其實都差不多
move(600, 400);
widget.move(600, 400);
QPoint point = QPoint(600, 400);
widget.move(point);
1.7 刷新視窗
使用的函數是:
void QWidget::update();
更新視窗的一些小部件
2.QDialog
QDialog一般用來實現對話框,對話框分為模塊化對話框和非模塊化對話框。
模塊化對話框是在主視窗的頂層,如果不解決這個對話框,那麼沒辦法和主視窗進行交互。
非模塊化對話框和模塊化相反,當激活對話框後不會阻塞主視窗,讓你的主視窗也能和用戶進行交互。
這個控制項也有一些基本的方法,比如說:show()
、exec()
、move()
、resize()
、hide()
、setGeomentry()
、setGeomentry()
。
2.1 QDialog對話框
一般使用這個控制項是來做一個對話框的,比如說我在上面剛纔創建好的工程中添加一下用繼承QDialog
的函數寫一個彈出的對話框。
首先在Headers
文件夾右鍵選擇Add New
然後再裡面選擇C++ Header File
然後點擊下一步,再這取一個名字即可,這裡叫Dialog.h
然後再右鍵Sources
文件夾,還是和上面一樣的,只不過需要選擇C++ Source File
。這裡叫Dialog.cpp
然後在Dialog.h
中寫上下麵的代碼:
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
//QT_BEGIN_NAMESPACE
//namespace Ui { class Widget; }
//QT_END_NAMESPACE
class Dialog:public QDialog{
public:
Dialog();
~Dialog();
};
#endif // DIALOG_H
在Dialog.cpp
中將析構函數和構造函數都實現一下,但是裡面沒有東西:
#include "Dialog.h"
Dialog::Dialog(){
}
Dialog::~Dialog(){
}
因為我懶得加,你也可以加一個改變標題的方法。
Dialog::Dialog(){
setWindowTitle("this is message");
}
然後在widget.cpp
中實例化一下對象,然後創建一個按鈕並且連接一下:
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QPushButton* button1 = new QPushButton;
button1->setParent(this);
button1->setText("dian yi xia");
connect(button1, &QPushButton::clicked, [=](){
this->dialog.show();
});
}
這裡看不懂沒關係,先瞭解一下,後面會慢慢說一下的。
運行的結果就是在Widget的頁面中有一個按鈕,你點一下它就會跳出一個我們剛纔創建的一個頁面。
總結
Qt真的很簡單,大家多查查資料就可以了。